2016-12-28 110 views
0

要找準我有錯誤,我創造了我的看法相同指令的兩個實例:相同指令的兩個實例相互干擾?

<criterion-news 
    state="ctrl.state"> 
</criterion-news> 
<criterion-news 
    state="null"> 
</criterion-news> 

首先會從包含控制器的狀態,第二個是明確地告知沒有狀態。

該指令的每個實例都由tree-based list組成,該指令的用途是顯示此列表並管理項目選擇行爲。

當我點擊第二個指令的UI時,第一個指令的狀態會被更新:當我在第二個實例中選中一個複選框時,第一個實例中相應項目的複選框會被檢查。在我看來,由於隔離範圍是在每個實例中創建的,並且由於我向第二個指令傳遞了「null」,因此兩個實例之間不應該共享數據。這裏是指令的結構:

"use strict"; 
(function() { 
    angular 
    .module("z360m.target-list") 
    .directive("criterionNews", function() { 
     return { 
     restrict: "E", 
     scope: { 
      "state": "=" 
     }, 
     bindToController: true, 
     templateUrl: "my template url", 
     controllerAs: "ctrl", 
     controller: function() { ... } 
     }; 
    }); 
})(); 

是不是有什麼問題呢?

編輯:我的指令包含複選框,它由功能ID標識。問題在於兩個實例中都重複了相同的ID。我在我的複選框ID中添加了一個隨機生成的指令實例ID,現在它像一個魅力一樣工作:我的狀態是獨立的。

+0

沒有足夠的信息在這裏進行測試我的理論在的時刻,但是如果我不得不做出*猜測*,這將是事實上,你正在爲父控制器和子指令控制器使用相同的別名('ctrl')。當你在孩子中引用'ctrl.state'時,它會看到父母的屬性。如果你的指令類似於'controllerAs:「newsDir」',那麼當你引用'newsDir.state'時,它不會找到那個屬性,儘管你仍然可以引用'ctrl.state' ...... – Claies

+0

in一般情況下,我建議不要在使用'controllerAs'時使用'ctrl','vm'或其他任何通用的東西。使用'controllerAs'的一個優點是可以更容易地看到你要修改什麼對象,但是當所有的對象都被命名爲相同的時候,它更容易出現這些類型的錯誤,除此之外不太清楚比如果每個控制器都是因其目的而命名的。 – Claies

回答

0

嘗試改變:

scope: { "state": "=" }, 

到:

scope: { "state": "=state" }, 
+0

感謝您的回覆。不幸的是,行爲沒有改變。 – Nicolas

0

你需要的代碼相似的這個例子:

http://codepen.io/anon/pen/MbNWWK

angular 
.module("starter", []) 
.controller('TestController', ['$scope', function ($scope) { 
    $scope.ctrl = this; 
    $scope.state = [1,2,3]; 
    $scope.teste = "ABCD"; 
}]) 
.directive("criterionNews", function() { 
    return { 
    restrict: "E", 
    scope: { 
     state: "=state" 
    },   
    template: '<ul><li ng-repeat="i in state">{{i}}</li></ul>'    
    }; 
});