Question

为了查明我所遇到的错误，我在视图中创建了同一指令的两个实例：

<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，现在它就像一个魅力：我的状态是独立的。

Answer 1

尝试更改：

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

为：

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

Answer 2

你需要类似这个例子的代码：

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>'               
  };
});

相同指令的两个实例相互干扰？

2 个答案: