AngularJS选择的插件,选择:更新不起作用,在浏览器中工作
AngularJS chosen plugin, chosen:updated not working, works in browser
我已经将选定的插件集成到我的angularjs应用程序中。 我的应用程序.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>
问题是当页面首次加载时,选择中不显示任何内容。检查元素时,选项就在那里。
chosen:updated
似乎不起作用。我把console.log()
放在手表里,它正在燃烧。如果我在浏览器中运行.trigger('chosen:updated')
,它可以完美运行。我确实尝试了element.trigger
但也没有用。太令人沮丧了!
在调用 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
而不是引用相等性。
相关文章:
- Javascript字母选择没有'我不能在谷歌浏览器上工作
- 如何在浏览器中选择所有*renderable*文本元素
- 选择首次单击浏览器操作时打开的弹出窗口
- 使用jQuery在焦点上选择文本框是't在移动浏览器中工作
- jQuery在一些Mobile/IE浏览器上选择更改
- 选择浏览器自动完成(而非自定义自动完成)后提交表单
- 在拖动之前清除内容选择的跨浏览器方法
- 如何使用webkit浏览器在一个范围内选择一个节点
- 为什么 mac 浏览器上的选择框没有响应单击事件
- 浏览器插件或扩展,选择哪个
- 如何确定(跨浏览器)是否选择了任何内容
- 双击选择框在现代浏览器上是不可能的
- 从FF和谷歌浏览器的像素坐标中选择
- 为谷歌浏览器创建拖动选择屏幕截图
- HTML 浏览器的“文本”选择:选择整个单词(如在 iBooks 中)
- AngularJS选择的插件,选择:更新不起作用,在浏览器中工作
- 在IE浏览器中选择不更改的选项
- 如何从其他选项卡中选择浏览器选项卡
- Javascript停止提交按钮,即使有人选择浏览器&阻止此页面创建额外的对话框"
- 为我的应用程序选择浏览器缓存还是本地缓存