我试图在打开的模式上执行jQuery脚本,以便将其中一个字段转换为jQuery UI Spinner.
我正在使用Angular UI中记录的已公开承诺.
问题:
jQuery选择器不能按预期工作,也不会检索任何内容.
所以我的控制器的一个功能看起来像这样:
var modalInstance = $modal.open({
templateUrl: 'modalDialog.html',controller: modalCtrl,resolve: {
noOfItems: function(){
return $scope.noOfItems;
}
}
});
modalInstance.opened
.then(function () {
$(".spinner").spinner({
max: 20,min: 1
});
});
modalInstance.result
.then(function () {
console.log("modal closed");
});
我的HTML:
modalCtrl是无关紧要的.
暗示:
我在调用打开的promise时尝试调试器,并发现模态尚未打开.
仅供参考,我使用的是jQuery 1.9.0,jQuery UI 1.10.4,AngularJS 1.2.16和Angular UI Bootstrap v0.11.
最佳答案
您正在从错误的角度处理问题,尝试从控制器执行低级DOM操作.这在AngularJS世界中是一个很大的禁忌,你将会遇到各种各样的麻烦.
您的UI逻辑不应该“等待”将给定的DOM节点添加到DOM树中,而应该以声明方式表达.在这种特殊情况下,它意味着您应该编写一个“滑块”指令,简单如下:
yourModule.directive('mySpinner',function() {
return {
link: function(scope,elm) {
elm.spinner({
max: 20,min: 1
});
}
};
});
然后在modal的HTML中使用这个新定义的指令:
这样你就不必担心当modal的内容被添加到DOM中时你已经习惯了使用可重用的方法来定义微调器!
回到$modal相关的问题 – 当所有数据都准备好并且即将显示模态(动画开始等)以便能够显示等待指示符或类似时,打开的承诺得到解决.绝不是它被设计为知道何时将模态的内容插入到DOM树中,就像AngularJS一样,大多数时候并不需要这种知识.