角度多选下拉框给出错误元素.多选不是一个函数

Angular multiselectDropdown giving error element.multiselect is not a function

本文关键字：一个函数错误元素更新时间：2023-09-26

Hi-am在angular js中使用multiselect指令。当我通过angular rout重定向到页面时，它会给我"element.multiselect不是函数"。如果我手动刷新页面，它会正常工作。任何人都不知道如何度过难关。

app.directive('multiselectDropdown', [function() {
return function(scope, element, attributes) {
    element = $(element[0]); // Get the element as a jQuery element
    // Below setup the dropdown:
    element.multiselect({
        buttonClass : 'btn btn-small',
        buttonWidth : '200px',
        buttonContainer : '<div class="btn-group" />',
        maxHeight : 200,
        enableFiltering : true,
        enableCaseInsensitiveFiltering: true,
        buttonText : function(options) {
            if (options.length == 0) {
                return element.data()['placeholder'] + ' <b class="caret"></b>';
            } else if (options.length > 1) {
                return _.first(options).text 
                + ' + ' + (options.length - 1)
                + ' more selected <b class="caret"></b>';
            } else {
                return _.first(options).text
                + ' <b class="caret"></b>';
            }
        },
        // Replicate the native functionality on the elements so
        // that angular can handle the changes for us.
        onChange: function (optionElement, checked) {
            optionElement.prop('selected'), false;
            if (checked) {
                optionElement.prop('selected', true);
            }
            element.change();
        }
    });
    // Watch for any changes to the length of our select element
    scope.$watch(function () {
        return element[0].length;
    }, function () {
        element.multiselect('rebuild');
    });
    // Watch for any changes from outside the directive and refresh
    scope.$watch(attributes.ngModel, function () {
        element.multiselect('refresh');
    });
    // Below maybe some additional setup
};

}])；

//my html code

<select name ='escalation_rule_ids' class="multiselect" data-placeholder="Select Escalation" 
                                    ng-model="formData.escalation_rule_ids" ng-options="item.id as item.rule_name for item in escalation_list"
                                    multiple="multiple" multiselect-cdropdown
                                    >
                                 </select>

您似乎正在将angular元素覆盖到其他内容中。我会把它换成这个：

app.directive('multiselectDropdown', [function() {
return function(scope, element, attributes) {
    var jqueryElement = $(element[0]); // Get the element as a jQuery element
    // Below setup the dropdown:
    jqueryElement.multiselect({
        buttonClass : 'btn btn-small',
        buttonWidth : '200px',
        buttonContainer : '<div class="btn-group" />',
        maxHeight : 200,
        enableFiltering : true,
        enableCaseInsensitiveFiltering: true,
        buttonText : function(options) {
            if (options.length == 0) {
                return jqueryElement.data()['placeholder'] + ' <b class="caret"></b>';
            } else if (options.length > 1) {
                return _.first(options).text 
                + ' + ' + (options.length - 1)
                + ' more selected <b class="caret"></b>';
            } else {
                return _.first(options).text
                + ' <b class="caret"></b>';
            }
        },
        // Replicate the native functionality on the elements so
        // that angular can handle the changes for us.
        onChange: function (optionElement, checked) {
            optionElement.prop('selected'), false;
            if (checked) {
                optionElement.prop('selected', true);
            }
            jqueryElement.change();
        }
    });
    // Watch for any changes to the length of our select element
    scope.$watch(function () {
        return element[0].length;
    }, function () {
        jqueryElement.multiselect('rebuild');
    });
    // Watch for any changes from outside the directive and refresh
    scope.$watch(attributes.ngModel, function () {
        jqueryElement.multiselect('refresh');
    });
    // Below maybe some additional setup
};