作用域绑定无法在AngularJS模态弹窗中使用

Question

我正在使用Angular将数据绑定到UI上，这非常完美。但是当单击按钮调用弹出模态框时，模态框中的绑定无法正常工作。

<div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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>&nbsp;&nbsp;
                <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();
    };


}]);

- codegrid

---

模态框是一个指令吗？如果是，那么指令会有自己的作用域。 - Sjoerd de Wit

这不是一个指令。 - codegrid

Answer 1

似乎您正在使用纯jQuery方法打开模态框。在Angular中，这不起作用，因为打开的模态框未连接到Angular应用程序，所以它不知道必须处理模态框、解析HTML等。

相反，您应该正确使用指令，或者在模态对话框的情况下，可以简单地使用现有的指令，例如Angular UI项目，它为Angular带来了准备好的Bootstrap指令。在您的情况下，您需要$modal服务。

然后使用非常简单：

// 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
        });
    };

}]);

演示: http://plnkr.co/edit/kQz0fiaXLv7T37N8fzJU?p=preview

- dfsq

---

ui.bootstrap 引用了哪个 js 文件？ - codegrid

请查看更新的答案，我添加了演示说明如何配置所有内容。 - dfsq

你好 @dfsq，我忘了说明我正在使用 .net MVC。我该如何在 templateUrl 中调用部分视图？ - codegrid

不是.NET专家，所以无法回答这个问题。但是你需要提供一个可下载资源的URL。意思是，如果你在浏览器中输入该网址，它会下载模板HTML文件。 - dfsq

好的。你真的帮了大忙。谢谢。 - codegrid

Answer 2

您需要在 modal-dialog 的 div 标签中指定 ng-controller。

<div class="modal-dialog" **ng-controller="myController"**>
.
.
.
.
.

更新

我想你在控制台窗口中看到了以下错误：

模块“myModule”不可用！您可能拼写错误或忘记加载它。如果注册一个模块，请确保将依赖项指定为第二个参数。

请将 nangular.module('myModule') 更改为 angular.module('myModule',[])。

请尝试使用下面的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();
    };


}]);

- Ramesh Rajendran

---

我认为你得到了控制台错误，请验证一下。 - Ramesh Rajendran

Answer 3

你的模态框（例如Bootstrap模态框）可能在ng-controller指令之外

- Krishna