Javascript 在模板范围内访问DOM-AngularJS_Javascript_Angularjs_Dom

Javascript 在模板范围内访问DOM-AngularJS

javascript angularjs dom

Javascript 在模板范围内访问DOM-AngularJS,javascript,angularjs,dom,Javascript,Angularjs,Dom,我是Angular JS的新手，我需要在我的指令模板中选择一些DOM元素，我知道Angular不赞成DOM操作，但在我的情况下，如果没有投入大量时间，我真的看不到有多少解决方法…。问题是我不止一次使用我的指令下面是一个代码示例来阐明我的意思： My index.html： <html> <head> <! necessary script> </head> <body ng-app='foo'> <my-dire

我是Angular JS的新手，我需要在我的指令模板中选择一些DOM元素，我知道Angular不赞成DOM操作，但在我的情况下，如果没有投入大量时间，我真的看不到有多少解决方法…。问题是我不止一次使用我的指令

下面是一个代码示例来阐明我的意思：

My 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>

我的模板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元素的技巧？

多谢各位

您已经拥有指令链接函数：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]。

除非您的示例比您正在做的任何事情都简单，否则我认为您的方法是错误的。你可以很容易地做到：

模板：

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

这要简单得多。我想我的主要问题是我学得很快，设计布局很快，但现在它太大了，我无法改变。谢谢你！这工作做得很好！我想我得到的印象是angular.element和$element是一样的……但它们的工作方式似乎不一样。有什么区别？这是个很好的问题。我从未使用过$element，但从我所能找到的情况来看，它们应该是相同的。如果我错了，请有人纠正我。

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

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