我已将所选插件集成到我的angularjs应用中。我的app.js看起来像这样。
myApp.directive('chosen', function() {
var linker = function (scope, element, attr) {
scope.$watch('countriesList', function() {
$('#countries').trigger('chosen:updated');
console.log('I acctuallty get in here');
})
element.chosen();
};
return {
restrict: 'A',
link: linker
};
})
我的选择看起来像这样
<div class="control-group">
<label for ="countries" class="control-label">Countries: </label>
<div class="controls">
<select chosen ng-model="countries" id="countries" ng-options="country.name for country in countriesList" data-placeholder="Select Countries" multiple class="span chzn-select"></select>
</div>
</div>
问题是当页面首次加载时,select中没有显示任何内容。检查元素时有选项。
chosen:updated
似乎无法正常工作。我将console.log()
放在手表中并且正在开火。如果我在浏览器中运行.trigger('chosen:updated')
,它就能完美运行。我确实试过了element.trigger
,但这也没用。太令人沮丧!
答案 0 :(得分:8)
在调用chosen
之前,您需要让Angular(实际上是浏览器)正确呈现选择。您可以使用setTimeout
或Angular的$timeout
来完成此操作。
app.directive('chosen', function($timeout) {
var linker = function(scope, element, attr) {
$timeout(function () {
element.chosen();
}, 0, false);
};
return {
restrict: 'A',
link: linker
};
});
第三个参数false
可以防止不必要的摘要循环。
演示: http://plnkr.co/edit/9Afq65uatTjnb4J6ICcB?p=preview
如果您需要动态添加或删除项目,这将有效:
app.directive('chosen', function($timeout) {
var linker = function(scope, element, attr) {
scope.$watch('countriesList', function() {
$timeout(function() {
element.trigger('chosen:updated');
}, 0, false);
}, true);
$timeout(function() {
element.chosen();
}, 0, false);
};
return {
restrict: 'A',
link: linker
};
});
演示: http://plnkr.co/edit/rEBu6d3HtaNhThWidB5h?p=preview
请注意,默认情况下$watch
使用引用相等性来确定是否执行侦听器。如果向数组添加项,则变量countriesList
仍将引用相同的数组,因此侦听器将不会执行。
传递给true
的第三个参数$watch
使其使用angular.equals
而不是引用相等。