Question

在ui路由器中使用＆＃39;控制器时，我对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>

我的问题是

由于他们共享了控制器，为什么我在openModal函数中分配给this/scope的所有东西都在closeModal中消失了。是因为我使用 CompanyCtrl作为lsmodal 创建了另一个新范围。如何解决这个问题？
这个好设计共用同一个控制器吗？或为模态创建一个单独的控制器。如果创建一个单独的控制器，我如何将新创建的公司对象附加到公司列表中，以便html中的公司列表也会更新。

Answer 1

是的，控制器不是单例，因此每次将控制器分配给模板时，您都在有效地创建它的新实例。我不确定这是否可以避免。这正是你看到未定义的原因。您尝试在对话框控制器中打印的this.modalInstance变量仅存在于父控制器的上下文中。
控制器可以/？应该？被认为是视图模型 - 也就是说，它们应该是视图的程序化表示。如果您有不同的视图，那么拥有不同的控制器是有意义的。如果您需要原始控制器中存在的模态数据，您可以随时通过＆＃39;数据通过解析如下：

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

使用ui模式时，ui路由器范围中的角度控制器不会更改

1 个答案: