无法从子 UI 访问父控制器的方法

Question

我有一个弹出表单，里面有很多标签。

它是这样的：

index.js

vm.openCreateOrEditPropertyModal = function (resolveProperty) {
    var modalInstance = $uibModal.open({
        templateUrl: '~/App/tenant/views/propertymanagement/createOrEditPropertyModal.cshtml',
        controller: 'tenant.views.propertymanagement.createOrEditPropertyModal as vm',
       resolve: {
              resolveProperty: function () {
              return resolveProperty;
                }
               }
                });
        };

标签是这样的：

createOrEditPropertyModal.cshtml

<uib-tabset class="tab-container tabbable-line" type="pills">
  <uib-tab heading="@L("PropertyInformation")">
       <div ng-include="'~/App/tenant/views/propertymanagement/tabs/propertyForm.cshtml'"></div>
      </uib-tab>
</uib-tabset>

createOrEditPropertyModal.js

(function () {
    appModule.controller("tenant.views.propertymanagement.createOrEditPropertyModal", [
        "$scope", "resolveProperty", "localStorageService", "$uibModalInstance", function ($scope, resolveProperty, localStorageService, $uibModalInstance) {

            var vm = this;


            //to close the pop up
            vm.cancel = function () {
                $uibModalInstance.close();
            };
        }
    ]);
})();

propertyForm.cshtml

<div ng-controller="tenant.views.propertymanagement.tabs.propertyForm as vm">
    <button type="button" ng-click="vm.cancel()">@L("Close")</button>
</div>

propertyForm.js

(function () {
    appModule.controller("tenant.views.propertymanagement.propertyForm", [
        "$scope", "resolveProperty", "localStorageService", function ($scope, resolveProperty, localStorageService) {

            var vm = this;



        }
    ]);
})();

以上设置工作正常。现在我需要从子窗体（即propertyForm.cshtml）访问createOrEditPropertyModal.js 文件上的cancel() 方法。但它没有被解雇。你能告诉我该怎么做?我试过这样ng-click="$parent.cancel()"。但它不起作用。

Answer 1

您可以直接在子表单中执行vm.cancel()，因为您已经在使用controllerAs 模式。但是在您的情况下，您的控制器别名都为vm，它指的是当前的子控制器上下文。更改任一控制器别名的名称将使其正常工作。

解决此问题的最佳方法是将您的控制器别名更改为不同的名称。控制器别名应该就像通过查看它们的名称可以假装它是哪个控制器一样。

--

ng-click 不起作用，因为cancel 方法不在$parent 范围内。你应该做$parent.vm.cancel()。但我不希望你在视图中使用$parent，因为这是不好的做法。

Answer 2

我能想到三种可能的解决方案：

1. 这是因为cancel 函数不在$parent 范围内，而是在父控制器上。实现这一点的一种方法可能是对控制器使用不同的命名：related SO answer

2. 否则，您可以将cancel 函数放在$scope 变量上的createOrEditPropertyModal。

只需更改createOrEditPropertyModal.js：

vm.cancel = function () {
    $uibModalInstance.close();
};

到

$scope.cancel = function () {
    $uibModalInstance.close();
};

1. 您可以将函数传递给类似于指令的模式：related SO answer