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