模型绑定在 Angular UI Bootstrap 模态中不起作用

Question

我有一个使用 Angular UI Bootstrap 模态服务的简单示例。在此示例中，我不明白为什么模型绑定不起作用。我没有在模态对话框中看到 "Doing something..."，而是看到“{{message}}”。我需要改变什么？

例子在这里： http://plnkr.co/edit/fJhS3e7At11tJTuNSWAB?p=preview

模态 html 看起来像这样：

<div ng-app="myModule">
    <div ng-controller="modalInstanceController" class="modal-body">
        <div>{{message}}</div>
    </div>
</div>

以及模块和控制器的定义：

var myAppModule = angular.module('myModule', ['ui.bootstrap']);

myAppModule.controller('modalInstanceController', function ($scope, $modalInstance, message) {
    var vm = this;
    vm.message = message;
});

myAppModule.controller('myController', function ($scope, $modal) {


        $scope.open = function open() {

            var modalInstance = $modal.open({
                templateUrl: 'modal.html',
                backdrop: 'static',
                //windowClass: 'custom-modal-wait',
                dialogFade: false,
                keyboard: false,
                controller: 'modalInstanceController',
                resolve: {
                    message: function () {
                        return "Doing something ...";
                    }
                }
            });

            setTimeout(function(){
                modalInstance.close('close');
                },5000);
        }

});

Answer 1

要使用你传递给模态的值，你需要把它放在它的范围内，所以设置模态控制器：

myAppModule.controller('modalInstanceController', function ($scope, $modalInstance, message) {
    $scope.message = message;
});

并从 modal.html 中删除 ng-controller，您在创建模态实例时已经为他分配了一个控制器

ng-controller="modalInstanceController"

您的固定示例：http://plnkr.co/edit/vnfL72EBMXsQ1NzlJNEF?p=preview

模型绑定在 Angular UI Bootstrap 模态中不起作用

Model binding not working in Angular UI Bootstrap modal

javascript

angularjs

angular-ui-bootstrap