javascript - Angularjs：如何根据数据属性值查找元素？

Question

我有以下指令：

template: '<div data-div="outer"><div data-div="inner"></div></div>',
link: function postLink(scope, elem, attrs) {
       var outer = elem.find('[data-div="outer"]');
       var inner = elem.find('[data-div="inner"]');
       outer.css({
           'background': 'red',
           'width': "100%",
           'height': "100%",
       });
       inner.css({
           'background': 'blue',
           'width': "50%",
           'height': "100%",
       });
    }

基于这篇文章，我尝试了这些选择器。但我使用 jQLite，而不是 JQuery。

那么，如何根据数据属性值找到元素呢？

http://plnkr.co/edit/FeJWvwnKjOZwAIABigtA?p=preview

Answer 1

使用 jqLit​​e 时，您可以使用querySelector()（或querySelectorAll()多个）来获得类似的行为......find()

function postLink(scope, elem, attrs) {
    var outer = angular.element(elem[0].querySelector('[data-div="outer"]'));
    var inner = angular.element(elem[0].querySelector('[data-div="inner"]'));
    outer.css({
       'background': 'red',
       'width': "100%",
       'height': "100%",
    });
    inner.css({
       'background': 'blue',
       'width': "50%",
       'height': "100%",
    });
}

Answer 2

演示 Plunker

在 Angular 中，您很少需要使用 jQuery 选择器来查找元素。Angular 将遍历 DOM 树并为您找到指令。

您所要做的就是执行指令：

app.directive('div', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            if(attr.div == 'outer') {
               element.css({
                  'background': 'red',
                  'width': "100%",
                  'height': "100%",
                });
            }
            if(attr.div == 'inner') { 
               element.css({
                  'background': 'blue',
                  'width': "50%",
                  'height': "100%",
                });
            }
        }
    }
});

如果您需要与父指令进一步交互，那么 Angular 也很容易做到。您只需在指令定义中包含一个require属性，父控制器将作为第四个参数注入到您的子指令的链接函数中：

app.directive ('parent', function() {
      return  {
         ...
         controller: function($scope, $element, $attrs) {
             function doSomething() {
             }
         } 
      }
});

app.directive('child, function() {
      return {
           restrict: 'A',
           require: '^parent',  // child directive requires a parent directive
           link: function(scope, element, attr, parentController) {
               // access to the parent controller
               parentController.doSomething();
           }
      }
});