当使用ui modal时，ui router作用域中的Angular控制器不会改变

Angular controller in ui router scope does not change when working with ui modal

本文关键字：ui Angular 控制器 改变 router modal 作用域      更新时间：2023-09-26

我混淆了在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. 这个设计是共用同一个控制器吗?或者为modal创建一个单独的控制器。如果创建一个分离的控制器，我如何将新创建的公司对象附加到公司列表，以便html中的公司列表也将更新。

  1. 是的，控制器不是单例的，所以每次你把控制器分配给一个模板，你都在有效地创建一个新的实例。我不确定这是否可以避免。这正是你看到未定义的原因。这。

    2. 在对话框控制器中打印的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
        });
    };
};
相关文章：