Javascript 访问角模板元素_Javascript_Angularjs

Javascript 访问角模板元素

javascript angularjs

Javascript 访问角模板元素,javascript,angularjs,Javascript,Angularjs,我想知道访问主html模板元素的正确方法是什么。我可以使用getelementbyid，也可以使用attr.$$element[0]访问它，但不知道是否有更干净的方法。在下面的示例中，我想要与getElementById行等效的代码 var app = angular.module('test', []); app.directive('test', function(){ return { restrict: 'E', template: '<canvas id="t

我想知道访问主html模板元素的正确方法是什么。我可以使用getelementbyid，也可以使用attr.$$element[0]访问它，但不知道是否有更干净的方法。在下面的示例中，我想要与getElementById行等效的代码

var app = angular.module('test', []);
app.directive('test', function(){
  return {
    restrict: 'E',
    template: '<canvas id="test-canvas"></canvas>',
    replace: true,
    link: function(scope, elem, attr) {
      // what is angular way of doing this?
      var canvas = initCanvas(document.getElementById("test-canvas")),
      // this works - is this recommended method?
      var canvas = attr.$$element[0];

    }
  };
});

var-app=angular.module（'test'，[]）；
应用指令（'测试'，函数（）{
返回{
限制：'E'，
模板：“”，
替换：正确，
链接：功能（范围、要素、属性）{
//这样做的方式是什么？
var canvas=initCanvas（document.getElementById（“测试画布”），
//这很有效-这是推荐的方法吗？
var canvas=attr.$$element[0]；
}
};
});

您应该像这样使用

elem

param：

var canvas = elem;

正如注释中提到的，它是一个

jqLite（jQuery）

wrapped元素

或

获取原始元素

如果您想访问子元素并对其进行处理，应该使用

angular.element

。Angular使用

jqLite

，它提供有限的

jQuery

方法。您可以在此处进一步阅读：。例如，在

jqLite

中，只能将

find（）

与标记名选择器一起使用，因此，如果要按id选择子项，则应使用如下内容：

angular.element(elem[0].querySelector('#your_child')).bind('click', () => {
  elem.toggleClass('some_class');
}

elem.find('#your_child').click(() => {
    elem.toggleClass('some_class');
});

如果您使用的是jQuery，您可以使用

find（）

，那么代码如下所示：

angular.element(elem[0].querySelector('#your_child')).bind('click', () => {
  elem.toggleClass('some_class');
}

elem.find('#your_child').click(() => {
    elem.toggleClass('some_class');
});

试用

console.log（elem）

您将看到它是什么。希望这有帮助

注意：假设您想从

ng repeat

指令中选择子元素。以前的解决方案不起作用，因为这些元素还不存在。您只需添加

$timeout

，如下所示：

function yourDirective($timeout) {
  return {
    ...
    link: function (scope, elem, attrs) {
      $timeout(() => {
        angular.element(elem[0].querySelectorAll('.your_child')).bind('click', () => {
          // Do something
        }
      });
    }
  }
}

angular
  .module('yourApp')
  .directive('yourDirective', yourDirective);