Question

你好我在角度js中使用multiselect指令。当我通过角度溃败重定向到页面时，它给了我“element.multiselect不是一个函数”。如果我manulally刷新页面它正常工作。任何人都知道如何解决它。

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>

Answer 1

您似乎将角度元素覆盖为其他内容。我会把它切换到这个：

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

Angular multiselectDropdown给出错误element.multiselect不是一个函数

1 个答案: