Question

我是Angular JS的新手，我需要在我的指令模板中选择一些DOM元素（我知道DOM操作在Angular中是不受欢迎的，但在我的情况下，我看不太多没有太多时间投入的方式...）。问题是我不止一次使用我的指令。

这是一个代码示例，用于阐明我的意思：

我的index.html：

<html>
  <head> <! necessary script> </head>
  <body ng-app='foo'>
    <my-directive my-attr="someVal"></my-directive>
    <my-directive my-attr="otherVal"></my-directive>
  </body>
</html>

我的JS：

angular.module('foo',[]).directive('myDirective', function() {
  return {
    restrict: 'E',
    templateUrl: 'foo-template.html',
    scope: {},
    replace: true,
    link: function(scope,elem,attrs) {
      //jQuery selector
      scope.bar = angular.element($('.bar').first());
      scope.bar.someFunction(attrs.myAttr);

      function someFunction(message) {
        scope.bar.html(message);
      }
    }
  };
});

我的模板（foo-template.html）：

<p class='bar'></p>

因此注入后我的index.html看起来像：

<html>
  <body>
    <p class='bar'>otherVal</p>
    <p class='bar'></p>
  </body>
</html>

当我想要它时：

<html>
  <body>
    <p class='bar'>someVal</p>
    <p class='bar'>otherVal</p>
  </body>
</html>

我想限制我在当前受控模板中的访问权限，因为第二次使用我的指令时它会到达第一段并更新它。我认为使用隔离范围可以解决问题，但事实并非如此。

有人知道如何实现这一点（或者有关于如何重构我的代码的任何提示，以便我不必选择DOM元素）？非常感谢你！

Answer 1

您已经拥有指令链接函数中指定的每个元素的引用：elem。

angular.module('foo',[]).directive('myDirective', function() {
  return {
    restrict: 'E',
    templateUrl: 'foo-template.html',
    replace: true,
    link: function(elem, attrs) {
      elem.html(attrs.myAttr);
    }
  };
});

元素引用已经包含在angular.element中，因此您应该可以在其上使用这些函数。如果您需要直接DOM参考，请改用elem[0]。

Answer 2

除非你的例子比你正在做的更简单，我认为你只是以错误的方式接近它。你可以轻松地做到：

模板：

<p class='bar'>{{message}}</p>

JS：

link: function(scope,elem,attrs) {
  scope.message = attrs.myAttr;
}

在模板范围内访问DOM - AngularJS

2 个答案: