使用 ui 模态时，ui 路由器范围内的 Angular 控制器不会改变

Question

当在 ui 路由器中使用“控制器”时，我对 ui 模态控制器中的范围感到困惑。我尝试继续使用与模态控制器相同的控制器 (CompanyCtrl)，以便我可以将新创建​​的公司数据添加到现有的公司范围中。在 openModal 函数的一侧，我将范围分配给 modalInstance 以便我可以使用此实例来关闭或对模态执行任何我想要的操作。但是，当我单击关闭按钮时，closeModal 中的 modalInstance 不知何故未定义。

//////// My company module and controller
var CompanyCtrl = function ($modal) {
    this.modalTitle = 'Create Company';

    this.openModal = function() {
        this.modalInstance = $modal.open({
            animation: true,
            controller: 'CompanyCtrl as lsmodal',
            bindToController: true,
            template: '<ls-modal><ls-create-company></ls-create-company></ls-modal>'
        });
    };

    this.closeModal = function() {
        console.log(this.modalInstance); // undefined ????????
    };
};

angular.module('company', []);

angular.module('company').config(function ($stateProvider) {

    /* Add New States Above */
    $stateProvider.state('master.company', {
        url: '/company',
        templateUrl: 'modules/company/company.html',
        controller: 'CompanyCtrl as company'
    });
})
.controller('CompanyCtrl', CompanyCtrl);

//////// ls modal html
<div class="modal-header">
<button type="button" class="close" ng-click="lsmodal.closeModal()">×</button>
<h4 class="modal-title">{{lsmodal.modalTitle}}</h4>

我的问题是

1. 既然他们共享了控制器，为什么我在 openModal 函数中分配给 this/scope 的所有东西都在 closeModal 中消失了。那是因为我使用 CompanyCtrl 作为 lsmodal 创建了另一个新范围。如何解决这个问题？

2. 这种好的设计是否共享同一个控制器？或为模态创建一个单独的控制器。如果创建一个单独的控制器，我如何将新创建的公司对象附加到公司列表中，以便 html 中的公司列表也将更新。

Answer 1

1. 是的，控制器不是单例，因此每次将控制器分配给模板时，实际上都是在创建它的新实例。我不确定这是否可以避免。这正是您看到未定义的原因。您尝试在对话框控制器中打印的 this.modalInstance 变量仅存在于父控制器的上下文中。

2. 控制器可以/？应该？被认为是视图模型——也就是说，它们应该是视图的编程表示。如果您有不同的视图，那么拥有不同的控制器是有意义的。如果您需要原始控制器中存在的模式中的数据，您始终可以通过以下方式“传递”数据：

var modalCtrl = function($scope, $modalInstance,DataYouExpectFromParentCtrl) {

    $scope.data = DataYouExpectFromParentCtrl;

    $scope.ok = function () {
        $modalInstance.close(/* pass anything here that the parent will receive after OK */);
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};



var CompanyCtrl = function ($modal) {
    this.modalTitle = 'Create Company';

    this.openModal = function() {
        var modalInstance = $modal.open({
            animation: true,
            controller: 'ModalCtrl as lsmodal',
            bindToController: true,
            template: '<ls-modal><ls-create-company></ls-create-company></ls-modal>',    
            resolve: {
                DataYouExpectFromParentCtrl: this.data;
            }
        });

        modalInstance.result.then(function (dataFromModal) {
            // handle data returned if OK
        }, function () {
            // handle cancellation
        });
    };
};