Angular multiselectDropdown給出錯誤element.multiselect不是函數

Question

您好我正在使用angularjs中的multislect指令。當我通過角度路由重定向到頁面時，它給了我「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 
};