Angularjs：调用指令方法作为控制器的回调

Question

我有一个指令，使用jquery“multiselect”插件来增强任何< select>属性为“filtermultiselect”。我的问题是select通过ajax调用填充，我不希望指令运行，直到< select>已填充。我修改了我的指令，如下所示

angular.module('filtermultiselectDirective', []) 
    .directive('filtermultiselect', function() { 
     return { 
      restrict: 'A', 
      link: function($scope, element, attrs) { 

      $scope.$on('createMultiSelectFilters', function (element) { 
       element.multiselect({ 
        disableIfEmpty: true, 
        buttonWidth:'100%', 
        enableFiltering: true, 
        includeSelectAllOption: true, 
        enableCaseInsensitiveFiltering: true      
       }); 
      }); 
     } 
    } 
}); 

，并从我的控制，我只是用

$scope.$broadcast('createMultiSelectFilters'); 

的回调。然而，不起作用，我得到“element.multiselect不是一个函数”。

对新手有任何建议吗？

Answer 1

这件事是通过传递“元素”作为一个参数到函数引起的。元素的值被范围的值覆盖。一个简单的修改，删除参数和一切工作。

angular.module('filtermultiselectDirective', []) 
    .directive('filtermultiselect', function() { 
     return { 
      restrict: 'A', 
      link: function($scope, element, attrs) { 

       $scope.$on('createMultiSelectFilters', function() { 

        element.multiselect({ 
         disableIfEmpty: true, 
         buttonWidth:'100%', 
         enableFiltering: true, 
         includeSelectAllOption: true, 
         enableCaseInsensitiveFiltering: true      
        }); 
       }); 
      } 
     } 
    }); 

Answer 2

不能验证你的代码我认为你必须在jQuery中包装你的元素。试试这个：

angular.module('filtermultiselectDirective', []) 
    .directive('filtermultiselect', function() { 
     return { 
      restrict: 'A', 
      link: function($scope, element, attrs) { 

      $scope.$on('createMultiSelectFilters', function (element) { 
       $(element).multiselect({ 
        disableIfEmpty: true, 
        buttonWidth:'100%', 
        enableFiltering: true, 
        includeSelectAllOption: true, 
        enableCaseInsensitiveFiltering: true      
       }); 
      }); 
     } 
    } 
}); 

Answer 3

我有一个更简单的方法来做到这一点。 当您在选择选项中做ng-repeat时只需添加此指令。 当您到达ng-repeat中的最后一个元素时，我们的element.multiselect块将被执行。

angular.module('filtermultiselectDirective', []) 
     .directive('filtermultiselect', function() { 
      return function ($scope, element, attrs) { 

        if ($scope.$last) { 
         element.multiselect({ 
         disableIfEmpty: true, 
         buttonWidth:'100%', 
         enableFiltering: true, 
         includeSelectAllOption: true, 
         enableCaseInsensitiveFiltering: true      
        }); 

        } 
       } 
    }); 

更新：应该$(element).multiselect