javascript - 使用 ui 模式时，ui 路由器范围内的 Angular Controller 不会改变

Question

当在 ui 路由器中使用“ Controller ”时，我对 ui 模态 Controller 中的范围感到困惑。我尝试继续使用相同的 Controller (CompanyCtrl)作为模式 Controller ，以便我可以将新创建​​的公司数据添加到现有公司范围中。在 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. 既然他们共享 Controller ，为什么我在 openModal 函数中分配给 this/scope 的所有内容都在 closeModal 中消失了。这是因为我使用 CompanyCtrl 作为 lsmodal 创建了另一个新范围。如何解决这个问题？

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

Answer 1

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

2. Controller 可以/？应该？被认为是 View 模型——也就是说，它们应该是 View 的编程表示。如果您有不同的观点，那么使用不同的 Controller 是有意义的。如果您需要原始 Controller 中存在的模式中的数据，您始终可以通过解析“传递”数据，如下所示:

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