Question

我有一个在隔离使用时工作正常的指令，但是当它在ng-repeat中使用时它会退出工作。我知道ng-repeat创建了它自己的隔离范围，但这并不重要，因为我不想在我的指令的隔离范围之外做任何事情。我创建了一个用于演示问题的plunker，您可以在此处看到：http://plnkr.co/edit/Y4ADmznnDCZvuxJrcZQ0?p=preview。

在指令的编译函数中，我将ng-click属性添加到元素中。请注意，“This works”链接（不在ng-repeat中）工作正常但其他链接（在ng-repeat内）不起作用。

这是来自plunker的指令：

var app = angular.module('plunker', []);
app.controller("AppCtrl", function($scope) {
  $scope.users = [{
    name: 'John',
    id: 1
  }, {
    name: 'anonymous'
  }];
});
app.directive("myDir", function($compile) {
  return {
    controller: 'directiveController',
    compile: function(el) {
      el.removeAttr('my-dir');
      el.attr('ng-click', 'fxn()');
      var fn = $compile(el);
      return function(scope){
        fn(scope);
      };
    }
  };
})
.controller("directiveController", function($scope) {
    $scope.fxn = function() {
      alert('It works');
    };
});

这是html：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.12/angular.js" data-semver="1.2.12"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div>
        <a my-dir>This works</a>
        <a my-dir ng-repeat="id in [1,2]"><br>This does not work</a>
    </div>
    </div>
  </body>

</html>

Answer 1

尝试在链接函数中绑定事件，而不是添加另一个必须编译的属性（DEMO）：

app.directive("myDir", function($compile) {
  return {
    controller: 'directiveController',
    compile: function(el) {
      el.removeAttr('my-dir');

      var fn = $compile(el);
      return function(scope, el){
        el.bind('click', scope.fxn);
        fn(scope);
      };
    }
  };
})

AngularJS：在ng-repeat内部的指令元素中添加属性不起作用

1 个答案: