Question

我是Angular的新手。我需要一个初学者指南，通过querySelectorAll和getElementsByTagName来定义函数以获取标记（例如div）和Id / Class（#blah或.blah）的长度或数量的最佳方法，因此可以调用它在html模板上获取页面上特定元素的当前计数。

function countTag(value1, value2) {
  var top_level_div = document.getElementById(' + value1 + ')
  top_level_div.document.getElementsByTagName(' + value2 + ’).length
}

function countElem(value) {
  document.querySelectorAll(' + value + ’).length
}

如何对上述两个函数进行角度化，以便可以在应用程序内的任何位置调用html模板？如果指令可能是一种方法，那么任何人都可以使用plnkr示例吗？

Answer 1

如果您在“DDO”中使用指令，请执行此操作。（指令定义对象）您可以访问jQuery对象作为＆＃39;元素＆＃39; attribute（如果在加载angular.js文件之前引用了jQuery）。

在你的链接函数（或compile.post方法）中，只需与元素属性进行交互。

实施例

.directive('sampleDrv', function () {
  return {
    ...
    link: function (scope, element) { // + other attributes
        // Just use your jQuery logic/function provider in an example 
        // Only difference is now syntax ex. document == angular.element(document)

          function sampleFn() {
              var sampleElementText = angular.element(document).find('p').text();
              console.log(sampleElementText);
          }

          sampleFn();

    }
})

您还可以在控制器上使用$ element对象，但不建议以这种方式与元素进行交互。

另外，您可能想看看Scott Allen的简短解释 - http://odetocode.com/blogs/scott/archive/2014/05/28/compile-pre-and-post-linking-in-angularjs.aspx

另外

https://docs.angularjs.org/api/ng/function/angular.element

querySelectorAll和getElementsByTagName的Angular方法

1 个答案: