javascript - 范围绑定(bind)在模态弹出式 angularjs 中不起作用

Question

我正在使用 Angular 将数据绑定(bind)到我的 UI，效果非常好。但是，当单击按钮时调用模态弹出窗口时，模态中的绑定(bind)不起作用。

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


}]);

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