twitter-bootstrap 范围绑定在模态弹出窗口 angularjs 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29161946/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scope binding not working in modal popup angularjs
提问by codegrid
I am using angular to bind data to my UI which works perfectly well. But when a modal popup is called on button click, the binding in the modal does not work.
我正在使用 angular 将数据绑定到我的用户界面，效果非常好。但是当单击按钮时调用模态弹出窗口时，模态中的绑定不起作用。
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">{{checkItem}}</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button ng-click="saveClient()" class="btn btn-primary pull-right btn-tabkey"><i class="fa fa-save"></i>Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="focusInput=false"><i class="fa fa-ban"></i>Cancel</button>
</div>
</div>
<!-- /.modal-content -->
</div>
Angular:
角度：
angular.module('myModule').controller('myController', ["$rootScope", "$scope", "$filter", "dataService", function ($rootScope, $scope, $filter, dataService) {
$scope.checkItem = "";
$scope.loadEditForm = function () {
$scope.checkItem = "yes";
$("#modal-form-edit").modal();
};
}]);
回答by dfsq
Seems like you are opening the modal using plain jQuery approach. This is not going to work in Angular, because opened modal is not connected to Angular application, so it doesn't know that modal has to be handled, HTML parsed, etc.
似乎您正在使用普通的 jQuery 方法打开模态。这在 Angular 中不起作用，因为打开的模态没有连接到 Angular 应用程序，所以它不知道必须处理模态、解析 HTML 等。
Instead you should use directives properly, or in case of modal dialog you can simply use existent ones, like Angular UI project, which brings ready Bootstrap directives for Angular. In your case you need $modalservice.
相反，您应该正确使用指令，或者在模态对话框的情况下，您可以简单地使用现有的指令，例如 Angular UI 项目，它为 Angular 提供了现成的 Bootstrap 指令。在您的情况下，您需要$modal服务。
The usage then would be very simple:
用法很简单：
// remember to add ui.bootstrap module dependency
angular.module('myModule', ['ui.bootstrap']);
angular.module('myModule').controller('myController', ["$rootScope", "$scope", "$filter", "$modal", "dataService", function ($rootScope, $scope, $filter, $modal, dataService) {
$scope.checkItem = "";
$scope.loadEditForm = function () {
$scope.checkItem = "yes";
$modal.open({
templateUrl: 'modal.html',
controller: 'modalController',
scope: $scope
});
};
}]);
回答by Ramesh Rajendran
You need to assign ng-controllerin your modal-dialog div tag.
您需要ng-controller在模态对话框 div 标签中进行分配。
<div class="modal-dialog" **ng-controller="myController"**>
.
.
.
.
.
Update
更新
I think you got this below error in your console window
我认为您在控制台窗口中遇到了以下错误
Module 'myModule' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
模块“myModule”不可用！您拼错了模块名称或忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。
So please change nangular.module('myModule')to angular.module('myModule',[])
所以请nangular.module('myModule')改为angular.module('myModule',[])
try this below js code instead of your code with my above changes
在 js 代码下面试试这个，而不是你的代码与我上面的更改
angular.module('myModule',[]).controller('myController', ["$rootScope", "$scope", "$filter", "dataService", function ($rootScope, $scope, $filter, dataService) {
$scope.checkItem = "";
$scope.loadEditForm = function () {
$scope.checkItem = "yes";
$("#modal-form-edit").modal();
};
}]);
回答by Krishna
It is possible that your modal (e.g - bootstrap modal ) might be outside of the ng-controller directive
您的模态（例如 - bootstrap modal ）可能在 ng-controller 指令之外
