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%", 
     }); 
    } 

Основываясь на this post, я попробовал эти селекторы. но im использует jQLite, а не JQuery.

так, как найти элемент на основе значения атрибута данных?

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

Answer 1

Вы можете использовать querySelector() (или querySelectorAll() для кратных), чтобы получить подобный find() поведение при использовании jqLite ...

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

Demo Plunker

В угловатый, вы редко когда-либо использовать JQuery селекторы, чтобы найти элементы. Угловая прогулка по дереву 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%", 
       }); 
      } 
     } 
    } 
}); 

Если вам нужны дополнительные взаимодействия с родительской директивы, угловатый делает это легко сделать тоже. Вы просто должны включать требует атрибута вашего определения директивы, и родительский контроллер будет введен в качестве 4-го параметра для функции связи вашего ребенка директивы:

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(); 
      } 
     } 
});