范围绑定在模态弹出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