การรวมตัวควบคุมการเรียกใช้งาน AngularJS สองครั้ง

ฉันเข้าใจ AngularJS วิ่งผ่านโค้ดสองครั้งบางครั้งก็ยิ่งมากขึ้นเช่น$watchเหตุการณ์ตรวจสอบสถานะของโมเดลอย่างต่อเนื่องเป็นต้น

อย่างไรก็ตามรหัสของฉัน:

function MyController($scope, User, local) {

var $scope.User = local.get(); // Get locally save user data

User.get({ id: $scope.User._id.$oid }, function(user) {
  $scope.User = new User(user);
  local.save($scope.User);
});

//...

ถูกดำเนินการสองครั้งโดยแทรก 2 บันทึกลงในฐานข้อมูลของฉัน ฉันยังคงเรียนรู้อย่างชัดเจนขณะที่ฉันต่อสู้กับสิ่งนี้มานานแล้ว!

แอปเราเตอร์ระบุทิศทางการนำทางMyControllerดังนี้:

$routeProvider.when('/',
                   { templateUrl: 'pages/home.html',
                     controller: MyController });

แต่ฉันก็มีสิ่งนี้ในhome.html:

<div data-ng-controller="MyController">

สิ่งนี้จะทำการย่อยตัวควบคุมสองครั้ง การลบdata-ng-controllerแอตทริบิวต์จาก HTML ช่วยแก้ไขปัญหา อีกทางเลือกหนึ่งcontroller:คุณสมบัติอาจถูกลบออกจากเส้นทางการกำหนด

ปัญหานี้ยังปรากฏขึ้นเมื่อใช้การนำทางแบบแท็บ ตัวอย่างเช่นapp.jsอาจประกอบด้วย:

  .state('tab.reports', {
    url: '/reports',
    views: {
      'tab-reports': {
        templateUrl: 'templates/tab-reports.html',
        controller: 'ReportsCtrl'
      }
    }
  })

แท็บรายงานที่เกี่ยวข้อง HTML อาจมีลักษณะคล้ายกัน:

<ion-view view-title="Reports">
  <ion-content ng-controller="ReportsCtrl">

สิ่งนี้จะส่งผลให้รันคอนโทรลเลอร์ได้สองครั้ง

AngularJS docs - ngController
โปรดทราบว่าคุณสามารถแนบตัวควบคุมเข้ากับ DOM ได้ด้วยการประกาศในคำจำกัดความเส้นทางผ่านบริการ $ route ข้อผิดพลาดทั่วไปคือการประกาศตัวควบคุมอีกครั้งโดยใช้ตัวควบคุม ng ในแม่แบบของตัวเอง นี่จะทำให้คอนโทรลเลอร์ถูกเชื่อมต่อและดำเนินการสองครั้ง

เมื่อคุณใช้ ngRoute พร้อมกับng-viewdirective คอนโทรลเลอร์จะเชื่อมต่อกับองค์ประกอบ dom นั้นตามค่าเริ่มต้น (หรือ ui-view หากคุณใช้ ui-router) ดังนั้นคุณไม่จำเป็นต้องแนบอีกครั้งในเทมเพลต

ฉันเพิ่งผ่านสิ่งนี้ แต่ปัญหาแตกต่างจากคำตอบที่ยอมรับ ฉันจะออกจากที่นี่เพื่อตนเองในอนาคตรวมถึงขั้นตอนที่ฉันต้องผ่านเพื่อแก้ไข

1. ลบการประกาศตัวควบคุมที่ซ้ำซ้อน
2. ตรวจสอบเครื่องหมายทับต่อท้ายในเส้นทาง
3. ตรวจสอบ ng-ifs
4. ตรวจสอบการng-viewโทรที่ไม่จำเป็น(โดยไม่ได้ตั้งใจng-viewเพราะถูกห่อไว้จริงng-viewซึ่งทำให้การควบคุมของฉันถูกเรียกสามครั้ง)
5. หากคุณอยู่บนรางคุณควรลบturbolinksอัญมณีออกจากapplication.jsไฟล์ของคุณ ฉันเสียทั้งวันเพื่อค้นพบสิ่งนั้น คำตอบที่พบที่นี่
6. การเริ่มต้นแอพสองครั้งด้วย ng-app และ bootstrap การรวมตัวควบคุมการเรียกใช้งาน AngularJS สองครั้ง
7. เมื่อใช้ $ รวบรวมองค์ประกอบทั้งใน link' ฟังก์ชั่นของคำสั่งที่ยังมีการควบคุมของตัวเองที่กำหนดไว้และการใช้งานของตัวควบคุมการเรียกกลับนี้ในแม่แบบผ่านงะคลิก ฯลฯ คำตอบที่พบที่นี่

เพียงแค่ต้องการเพิ่มอีกหนึ่งกรณีเมื่อคอนโทรลเลอร์สามารถเริ่มต้นได้สองครั้ง (นี่เป็นจริงสำหรับ angular.js 1.3.1):

<div ng-if="loading">Loading...</div>
<div ng-if="!loading">
    <div ng-view></div>
</div>

ในกรณีนี้ $ route.current จะถูกตั้งค่าไว้เมื่อ ng-view จะเริ่มต้น ที่ทำให้เกิดการเริ่มต้นสองครั้ง

เพื่อแก้ไขมันเพียงแค่เปลี่ยน ng-if เป็น ng-show / ng-hide และทั้งหมดจะทำงานได้ดี

ต้องการเพิ่มสำหรับการอ้างอิง:

การเรียกใช้งานโค้ดคอนโทรลเลอร์คู่สามารถเกิดขึ้นได้โดยอ้างอิงตัวควบคุมในคำสั่งที่รันบนเพจ

เช่น

return {

            restrict: 'A',
            controller: 'myController',
            link: function ($scope) { ....

เมื่อคุณมี ng-controller = "myController" ใน HTML ของคุณ

เมื่อใช้angular-ui-routerกับ Angular 1.3+ มีปัญหาเกี่ยวกับมุมมองการแสดงผลสองครั้งในการเปลี่ยนเส้นทางการแสดงผลมุมมองสองครั้งในการเปลี่ยนเส้นทางสิ่งนี้ส่งผลให้ตัวควบคุมดำเนินการสองครั้งเช่นกัน ไม่มีวิธีแก้ปัญหาที่เสนอให้ฉัน

อย่างไรก็ตามการปรับปรุงangular-ui-routerจาก 0.2.11 ถึง 0.2.13 แก้ไขปัญหาสำหรับฉัน

ฉันฉีกแอพของฉันและการอ้างอิงทั้งหมดของบิตกับปัญหานี้ (รายละเอียดที่นี่: แอป AngularJS เริ่มต้นสองครั้ง (ลองวิธีแก้ปัญหาตามปกติ .. ) )

และท้ายที่สุดมันเป็นความผิดของปลั๊กอินของ Batarang Chrome ทั้งหมด

การแก้ปัญหาในคำตอบนี้ :

ฉันขอแนะนำอย่างยิ่งสิ่งแรกในรายการของทุกคนคือการปิดการใช้งานมันต่อการโพสต์ก่อนที่จะเปลี่ยนรหัส

หากคุณรู้ว่าคอนโทรลเลอร์ของคุณทำงานมากกว่าหนึ่งครั้งโดยไม่ตั้งใจให้ลองค้นหาไฟล์ของคุณเพื่อหาชื่อของคอนโทรลเลอร์ที่ละเมิดเช่น ex: search: MyController ผ่านไฟล์ทั้งหมด ดูเหมือนว่าจะมีการคัดลอกวางในไฟล์ html / js อื่น ๆ และคุณลืมที่จะเปลี่ยนเมื่อคุณต้องพัฒนาหรือใช้งาน partials / controllers เหล่านั้น ที่มา: ฉันทำผิดพลาดนี้

ฉันมีปัญหาเดียวกันในแอปง่าย ๆ (โดยไม่มีการกำหนดเส้นทางและการอ้างอิงตัวควบคุม ng แบบง่าย) และคอนสตรัคเตอร์ของตัวควบคุมของฉันทำงานสองครั้ง ในที่สุดฉันพบว่าปัญหาของฉันคือการประกาศต่อไปนี้เพื่อบูตอัตโนมัติแอปพลิเคชัน AngularJS ของฉันในมุมมองมีดโกนของฉัน

<html ng-app="mTest1">

ฉันยัง bootstrapped ด้วยตนเองโดยใช้ angular.bootstrap เช่น

angular.bootstrap(document, [this.app.name]);

ดังนั้นการลบหนึ่งในนั้นใช้งานได้สำหรับฉัน

ในบางกรณีคำสั่งของคุณจะทำงานสองครั้งเมื่อคุณไม่ถูกต้องใกล้กับคำสั่งเช่นนี้:

<my-directive>Some content<my-directive>

สิ่งนี้จะเรียกใช้คำสั่งของคุณสองครั้ง นอกจากนี้ยังมีอีกกรณีหนึ่งเมื่อคำสั่งของคุณทำงานสองครั้ง:

ตรวจสอบให้แน่ใจว่าคุณไม่ได้รวมคำสั่งของคุณในindex.html สองครั้ง !

รับรอยขีดข่วนหัวของฉันเกี่ยวกับปัญหานี้กับ AngularJS 1.4 rc build จากนั้นตระหนักว่าไม่มีคำตอบใด ๆ ข้างต้นถูกนำมาใช้เนื่องจากมันมาจากไลบรารีเราเตอร์ใหม่สำหรับ Angular 1.4 และ Angular 2ในขณะที่เขียนนี้ ดังนั้นฉันจึงทิ้งข้อความไว้ที่นี่สำหรับทุกคนที่อาจใช้ห้องสมุดเส้นทางเชิงมุมใหม่

โดยทั่วไปหากหน้า html มีng-viewportคำสั่งสำหรับการโหลดบางส่วนของแอปของคุณโดยการคลิกที่การเชื่อมโยงหลายมิติที่ระบุด้วยng-linkจะทำให้ตัวควบคุมเป้าหมายขององค์ประกอบที่เกี่ยวข้องโหลดขึ้นสองครั้ง ความแตกต่างที่ลึกซึ้งคือถ้าเบราว์เซอร์โหลดตัวควบคุมเป้าหมายแล้วโดยการคลิกที่การเชื่อมโยงหลายมิติเดียวกันอีกครั้งจะเรียกใช้ตัวควบคุมเพียงครั้งเดียว

ยังไม่พบวิธีแก้ปัญหาที่เหมาะสม แต่ฉันเชื่อว่าพฤติกรรมนี้สอดคล้องกับการสังเกตของshaunxuและหวังว่าปัญหานี้จะได้รับการแก้ไขในอนาคตของการสร้างไลบรารี่ใหม่และ AngularJS 1.4

ในกรณีของฉันฉันพบสองมุมมองโดยใช้คอนโทรลเลอร์เดียวกัน

$stateProvider.state('app', {
  url: '',
  views: {
    "viewOne@app": {
      controller: 'CtrlOne as CtrlOne',
      templateUrl: 'main/one.tpl.html'
    },
    "viewTwo@app": {
      controller: 'CtrlOne as CtrlOne',
      templateUrl: 'main/two.tpl.html'
    }
  }
});

ปัญหาที่ฉันพบอาจมีการสัมผัสกัน แต่เนื่องจาก googling นำฉันมาที่คำถามนี้สิ่งนี้อาจเหมาะสม ปัญหาเกิดขึ้นกับหัวที่น่าเกลียดสำหรับฉันเมื่อใช้ UI Router แต่เมื่อฉันพยายามรีเฟรชหน้าเว็บด้วยปุ่มรีเฟรชเบราว์เซอร์ แอปใช้เราเตอร์ UI ด้วยสถานะนามธรรมหลักแล้วลูกระบุสถานะปิดพาเรนต์ ในrun()ฟังก์ชั่นแอพมี$state.go('...child-state...')คำสั่ง สถานะพาเรนต์ใช้resolveและในตอนแรกฉันคิดว่าบางทีตัวควบคุมลูกกำลังทำงานสองครั้ง

ทุกอย่างเรียบร้อยก่อน URL จะต่อท้ายแฮช
www.someoldwebaddress.org

จากนั้นเมื่อมีการแก้ไข URL โดย UI Router
www.someoldwebaddress.org#/childstate

... และแล้วเมื่อฉันรีเฟรชหน้าเว็บเบราว์เซอร์ที่มีปุ่มรีเฟรชที่ไฟสองครั้งและแต่ละจุดเวลาไป$stateChangeStartchildstate

resolveกับสถานะผู้ปกครองเป็นสิ่งที่ยิงสองครั้ง

บางทีนี่อาจเป็นกระบอง ไม่ว่าจะเกิดปัญหาอะไรขึ้นกับฉัน: ในส่วนของรหัสที่$stateProviderถูกเรียกใช้ครั้งแรกให้ตรวจสอบก่อนเพื่อดูว่าwindow.location.hashเป็นสตริงว่างหรือไม่ ถ้าเป็นเช่นนั้นทั้งหมดเป็นสิ่งที่ดี หากไม่ใช่ให้ตั้งค่าwindow.location.hashเป็นสตริงว่าง ดูเหมือนว่ามี$stateเพียงความพยายามที่จะไปที่ใดที่หนึ่งมากกว่าจะเป็นสองเท่า

นอกจากนี้หากคุณไม่ต้องการพึ่งพาค่าเริ่มต้นของแอพrunและstate.go(...)คุณสามารถลองจับค่าแฮชและใช้ค่าแฮชเพื่อกำหนดสถานะลูกที่คุณเพิ่งจะรีเฟรชหน้าเพจและเพิ่มเงื่อนไขในพื้นที่ของคุณ state.go(...)รหัสที่คุณตั้งค่า

ในกรณีของฉันมันเป็นเพราะรูปแบบ URL ที่ฉันใช้

URL ของฉันเป็นเหมือน / ui / project /: parameter1 /: parameter2

ฉันไม่ต้องการ paramerter2 ในทุกกรณีของการเปลี่ยนสถานะ ในกรณีที่ฉันไม่ต้องการพารามิเตอร์ตัวที่สอง URL ของฉันจะเป็น / ui / project /: parameter1 / ดังนั้นเมื่อใดก็ตามที่ฉันมีการเปลี่ยนแปลงสถานะฉันจะให้ผู้ควบคุมของฉันรีเฟรชสองครั้ง

วิธีแก้ไขคือการตั้งค่าพารามิเตอร์ 2 เป็นสตริงว่างและทำการเปลี่ยนแปลงสถานะ

ฉันมีการเริ่มต้นสองครั้งนี้เกิดขึ้นด้วยเหตุผลที่แตกต่างกัน สำหรับการเปลี่ยนเส้นทางในแอปพลิเคชันของฉันฉันต้องการบังคับให้เลื่อนไปใกล้ด้านบนของหน้า (เช่นในผลการค้นหาหน้า ... การคลิกถัดไปควรนำคุณไปด้านบนสุดของหน้า 2)

ฉันทำสิ่งนี้โดยการเพิ่มผู้ฟังที่ดำเนินการ$rootScope $on $viewContentLoaded(ตามเงื่อนไขบางประการ)

$location.hash('top');

นี่เป็นสาเหตุที่ทำให้เส้นทางของฉันถูกประเมินค่าใหม่และตัวควบคุมจะถูกกำหนดค่าเริ่มต้นใหม่

ปัญหาของฉันคือการปรับปรุงพารามิเตอร์การค้นหาเช่นนั้น $location.search('param', key);

คุณสามารถอ่านเพิ่มเติมได้ที่นี่

คอนโทรลเลอร์ได้รับการเรียกสองครั้งเนื่องจากผนวกพารามิเตอร์ใน URL

ในกรณีของฉันเปลี่ยนชื่อตัวควบคุมเป็นชื่ออื่นแก้ปัญหาได้

มีความขัดแย้งของชื่อคอนโทรลเลอร์ด้วยโมดูล" angular-ui-tree ": ฉันเปลี่ยนชื่อคอนโทรลเลอร์ของฉันจาก "CatalogerTreeController" เป็น " TreeController " จากนั้นคอนโทรลเลอร์จะเริ่มต้นการเริ่มต้นสองครั้งในหน้าที่ใช้คำสั่ง" ui-tree " เพราะ คำสั่งนี้ใช้ตัวควบคุมชื่อ " TreeController "

สำหรับผู้ที่ใช้ไวยากรณ์ ControllerAs เพียงประกาศเลเบลคอนโทรลเลอร์ใน $ routeprovider ดังนี้:

$routeprovider
        .when('/link', {
            templateUrl: 'templateUrl',
            controller: 'UploadsController as ctrl'
        })

หรือ

$routeprovider
        .when('/link', {
            templateUrl: 'templateUrl',
            controller: 'UploadsController'
            controllerAs: 'ctrl'
        })

หลังจากประกาศ $ routeprovider ห้ามจัดหาคอนโทรลเลอร์ดังเช่นในมุมมอง ใช้ป้ายกำกับแทนในมุมมองแทน

ฉันมีปัญหาเดียวกันและหลังจากลองคำตอบทั้งหมดฉันก็พบว่าฉันมีคำสั่งในมุมมองของฉันที่ถูกผูกไว้กับตัวควบคุมเดียวกัน

APP.directive('MyDirective', function() {
  return {
    restrict: 'AE',
    scope: {},
    templateUrl: '../views/quiz.html',
    controller: 'ShowClassController'
}
});

หลังจากถอดไดเรกทีฟแล้วคอนโทรลเลอร์จะหยุดการเรียกสองครั้ง ตอนนี้คำถามของฉันคือจะใช้คำสั่งนี้ถูกผูกไว้กับขอบเขตของตัวควบคุมโดยไม่มีปัญหานี้ได้อย่างไร

ฉันเพิ่งแก้ไขของฉันซึ่งจริงๆแล้วค่อนข้างน่าผิดหวัง มันเป็นแอพไฮบริดไอออนิกฉันใช้ ui-router v0.2.13 ในกรณีของฉันมีผู้อ่าน epub (ใช้ epub.js) ซึ่งรายงานอย่างต่อเนื่องว่า "ไม่พบเอกสาร" เมื่อฉันไปที่ห้องสมุดหนังสือของฉันและเลือกหนังสือเล่มอื่น เมื่อฉันโหลดหนังสือเบราว์เซอร์ถูกแสดงอย่างสมบูรณ์ แต่เมื่อฉันเลือกหนังสือเล่มอื่นก็มีปัญหาเดียวกันอีกครั้ง

การแก้ปัญหาของฉันง่ายมาก ฉันเพิ่งลบออกreload:trueจาก$state.go("app.reader", { fileName: fn, reload: true });ในLibraryController

ฉันมีปัญหาเดียวกันในangular-route@1.6.7และเป็นเพราะทับพิเศษในตอนท้ายของเส้นทาง regex:

.when('/goods/publish/:classId/', option)

ถึง

.when('/goods/publish/:classId', option)

และทำงานอย่างถูกต้อง

เพียงเพิ่มเคสของฉันที่นี่เช่นกัน:

ฉันใช้angular-ui-routerกับ$state.go('new_state', {foo: "foo@bar"})

เมื่อฉันเพิ่มencodeURIC ขึ้นกับพารามิเตอร์ปัญหาก็หายไป: $state.go('new_state', {foo: encodeURIComponent("foo@bar")}).

เกิดอะไรขึ้น? ห้ามใช้อักขระ "@" ในค่าพารามิเตอร์ใน URL ดังนั้น angular-ui-router จึงสร้างคอนโทรลเลอร์ของฉันขึ้นสองครั้ง: ในระหว่างการสร้างครั้งแรกมันจะผ่าน "foo @ bar" ดั้งเดิมในระหว่างการสร้างครั้งที่สองมันจะผ่านเวอร์ชั่นที่เข้ารหัส "foo% 40bar" เมื่อฉันเข้ารหัสพารามิเตอร์อย่างชัดเจนตามที่แสดงด้านบนปัญหาก็หายไป

ฉันคิดว่าฉันถูกเรียกสองครั้งเพราะฉันเรียกวิธีนี้สองครั้งจาก html ของฉัน

`<form class="form-horizontal" name="x" ng-submit="findX() novalidate >
 <input type="text"....>
 <input type="text"....>
 <input type="text"....>
 <button type="submit" class="btn btn-sm btn-primary" ng-click="findX()"
</form>`

ส่วนที่ไฮไลต์ทำให้ findX () ถูกเรียกสองครั้ง หวังว่าจะช่วยใครซักคน