Question

我想知道访问主html模板元素的正确角度方式是什么。我可以使用getelementbyid，也可以使用attr。$$元素[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];

    }
  };
});

Answer 1

你应该像这样使用elem param：

var canvas = elem;

这是一个jqLite (jQuery)包裹的元素，正如评论中提到的那样。

或

var canvas = elem[0];

获取原始元素。

如果您想访问子元素并对其执行某些操作，则应使用angular.element。 Angular使用jqLite，它提供有限的jQuery方法。您可以在此处进一步阅读：Angular's jqLite。例如，在jqLite中，您只能将find()与标记名称选择器一起使用，因此如果您想按ID选择子项，则应使用类似的内容：

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

如果您使用的是jQuery，则可以使用find()，那么代码将如下所示：

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

试试console.log(elem)你会看到它是什么。希望这有帮助！

P.S。：假设您要从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);

访问角度模板元素

1 个答案: