1

我想知道访问主 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];

    }
  };
});
4

1 回答 1

1

你应该elem像这样使用参数：

var canvas = elem;

jqLite (jQuery)正如评论中提到的，它是一个包装元素。

或者

var canvas = elem[0];

获取原始元素。

如果你想访问子元素并用它们做一些事情，你应该使用angular.element. Angular 使用jqLite，它提供了有限的jQuery方法。您可以在此处进一步阅读：Angular 的 jqLit​​e。例如，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)你会知道它是什么。希望这可以帮助！

PS：假设您要从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);
于 2016-06-13T17:03:09.407 回答