范围绑定在模态弹出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.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();
    };


}]);

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

Answer 2

您需要在模态对话框div标签中指定ng-controller。

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

更新

我认为您在控制台窗口中出现以下错误

模块＆＃39; myModule＆＃39;不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

因此，请将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();
    };


}]);

Answer 3

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