在使用 Bootstrap 模式时,我无法使用 Angular JS 更改范围值。基本上我正在调用函数来打开我存储在controller.js文件中的模态,然后我尝试修改范围值并将它们显示在模态对话框中。
我将点击事件添加到我的一个 js 组件中。
eventClick: function(event, element) {
var $scope = angular.element("#eRotaController").scope();
$scope.OpenModal("addEventModal", false, event);
}
html 元素的一部分(模式对话框):
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{misc.modalTitles}}</h4>
</div>
最后是OpenModal函数和变量
// Variables
$scope.misc = {
modalTitle: "",
showRemoveEvent : false
};
$scope.OpenModal = function (modal, isNew, event)
{
if (isNew) {
$scope.misc.modalTitle = "Add new Event";
}
else{
$scope.misc.modalTitle = "Update event for: " + event.title;
$scope.misc.showRemoveEvent = true;
console.log($scope);
}
$("#" + modal).modal('show');
}
当我在 OpenModal 函数内更新 modalTitle 时,打开模态时它不会反射(reflect)任何更改。
我创建了一个更简单的示例来确定它是否是模态问题,结果证明不是。
我添加的快速测试:
<button ng-click="OpenModal2()"></button>
{{misc.showRemoveEvent}}
$scope.OpenModal2 = function()
{
$scope.misc.modalTitle = "Update event for: " + event.title;
$scope.misc.showRemoveEvent = true;
}
效果很好。
因此,当直接从 html 元素调用方法时它可以正常工作,但当使用对 Controller 的引用从 js 调用时会失败:
var $scope = angular.element("#eRotaController").scope();
$scope.OpenModal("addEventModal", false, event);
不起作用
最佳答案
尝试这样做:
eventClick: function(event, element) {
var $scope = angular.element("#eRotaController").scope();
$scope.$apply(function (){
$scope.OpenModal("addEventModal", false, event);
})
},
如果 eventClick 是 Angular 上下文之外的函数,那么上面的代码可能会起作用。
关于javascript - Angular JS 和 Bootstrap Modal 的数据绑定(bind)问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37919925/