Question

我有一个使用jquery＆＃34; multiselect＆＃34;插件来增强任何＆lt;选择＆gt;属性为＆＃34; filtermultiselect＆＃34;。我的问题是select是通过ajax调用填充的，我不希望指令运行直到＆lt;选择＆gt;已经填充。我修改了我的指令如下

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');

作为回调。但是，没有工作，我得到＆＃34; element.multiselect不是一个功能＆＃34;。

对新手有什么建议吗？

Answer 1

无法验证您的代码我认为您必须将您的元素包装在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 2

我有一种更简单的方法。在select选项中执行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

Answer 3

问题是将“element”作为参数传递给函数引起的。元素的值被范围的值覆盖。一个简单的修正，删除参数和一切工作。

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

Angularjs：将指令方法作为来自控制器的回调

3 个答案: