Angular指令的元素

Question

我有这个指令：

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插件只能与第一个选项一起使用。

Answer 1

jQuery(element)返回使用指令的元素的jQuery包装。 jQuery('.dndComponent').first()返回该类的第一个元素。

假设该指令仅使用一次（不依赖此指令），那么选择器将返回element的子element ， element是'.dndComponent'的父element ；

===

考虑也做$（element）.find（'。dndComponent'），因为这样您就可以使用指令N次，它将始终有效，否则它将始终返回第一个指令的.dndComponent 。