Question

我遇到一个问题，在调用keyup函数时，我用于ng重复中几个相似元素的指令显示错误的元素。

plunker：http://plnkr.co/edit/ARFlsgPdxikpzLScztxU?p=preview

这里的代码相同：
html

<body ng-app="app">
  <section ng-controller="MainController" ng-repeat="item in list">
    <div ng-repeat="item in list">
      <h3>Item {{$index}}</h3>

      <div class="aliasContainer">
        <input text="text" obj-key="alias" value="{{item.alias}}" ng-keyup="logItem($event, item)">
      </div>

      <div class="nameContainer">
        <input text="text" obj-key="name" value="{{item.name}}" ng-keyup="logItem($event, item)">
      </div>
    </div>
  </section>
  <script src="https://code.angularjs.org/1.2.25/angular.js"></script>
  <script src="script.js"></script>
</body>

js

var app = angular.module('app', []);
app.controller('MainController', ['$scope', function($scope){
  console.log("hello ctrl");
  $scope.list = [
    {name: 'Dick Grayson', alias: 'Nightwing'},
    {name: 'Bruce Wayne', alias: 'Batman'},
    {name: 'Jason Todd', alias: 'Robin'}
  ];
}]);
app.directive('objKey', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      scope.logItem = function($event, item) {
       console.log(element);
      };
    }
  };
});

链接函数显示的行为是对于每个重复的div，只有nameContainer中的输入才会传递给keyup（即使在aliasContainer中输入，记录元素也会显示同一父div的nameContainer中的输入）是触发因素。）

Answer 1

要重复使用您的指令并将其范围与外部作用域（控制器）分开，您需要在指令中使用isolate scope

app.directive('objKey', function() {
  return {
    restrict: 'A',
    scope: true,     // << Isolating scope
    link: ....
  }
};

Answer 2

您应该查看指令的范围：https://docs.angularjs.org/guide/directive

如果不隔离范围，则指令的范围将与声明范围时的范围相同，在这种情况下，它将使用ng-repeat创建的子范围。

要解决此问题，请将范围与scope: true

隔离开来

Angular指令引用错误的元素

2 个答案: