Блог

У меня есть эта директива:

 function dndDirective($timeout) {

  return {
    template: '<div class="dndComponent"> Title: {{title}} </div>',
    scope: {
      title: '<'
    },
    compile: myCompile
  };

      function myCompile(tElement, tAttrs, transclude) {
        return {
          pre: function postLink($scope, element, attrs, transclude) {

            $scope.$watchGroup(['title'], function(newVals) {
              $timeout(function() {
                jQuery('.dndComponent').first().myPlugin();
                jQuery(element).myPlugin();
              });
            })
          }
        }
      }
  

Почему jQuery('.dnd').first() объект отличается jQuery(element) от? Они имеют разные контексты, и мой плагин jQuery может работать только с первым вариантом.

jQuery(element) возвращает оболочку jQuery элемента, в котором используется директива. jQuery('.dndComponent').first() возвращает первый элемент с этим классом.

Предполагая, что директива используется только один раз (не полагайтесь на это), селектор возвращает дочерний элемент element , element является родительским элементом ‘.dndComponent’;

===

Подумайте также о том, чтобы выполнить $(element).find(‘.dndComponent’), потому что таким образом вы можете использовать свою директиву N раз, и она всегда будет работать, в противном случае она всегда будет возвращать .dndComponent значение первой директивы.