無法從子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; 



     } 
    ]); 
})(); 

以上設置工作fine.Now我需要訪問cancel()方法在createOrEditPropertyModal.js文件從子表單（即但是它並沒有被解僱。你能告訴我該怎麼做嗎？我嘗試過這樣的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(); 
}; 

可以傳遞函數來模態類似於指令：related SO answer