Zugriff auf die Methode des übergeordneten Controllers über die untergeordnete Benutzeroberfläche nicht möglich

Question

Ich habe ein Popup-Formular, in dem viele Registerkarten vorhanden sind.

Sein wie folgt aus:

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

Tabs sind wie folgt aus:

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; 



     } 
    ]); 
})(); 

Above aufgebaut arbeitet fine.Now I cancel() Methode zugreifen müssen auf der createOrEditPropertyModal.js-Datei von dem untergeordneten Formular (d. H. propertyForm.cshtml). Aber es wird nicht gefeuert.Können Sie mir sagen, wie das geht? Ich habe es versucht ng-click="$parent.cancel()". Aber es funktioniert nicht.

Answer 1

Sie könnentundirekt in einem untergeordneten Formular, da Sie bereits Controller als Muster verwenden. Aber in Ihrem Fall haben Sie beide Controller Alias ​​als vm es bezieht sich auf aktuelle Kind Controller-Kontext. Wenn Sie den Namen eines der beiden Controller-Aliasnamen ändern, funktioniert es.

Der beste Weg, um dieses Problem zu lösen, würde Ihren Controller-Alias ​​auf einen anderen Namen ändern. Controller aaliases sollte wie durch den Blick auf ihren Namen ist, können Sie vorgeben, welcher Controller es ist.

-

Die ng-click funktioniert nicht, weil cancel Methode nicht da innerhalb $parent Umfang ist. Sie sollten $parent.vm.cancel() tun. Aber ich würde nicht bevorzugen, dass Sie $parent auf Sicht verwenden, weil schlechte Praxis.

Answer 2

Ich denke an drei können mögliche Lösungen:

1. Es ist, weil die cancel Funktion nicht auf dem $parent Umfang, aber auf der übergeordneten Steuerung. Eine Möglichkeit, dies zu erreichen, ist wahrscheinlich unterschiedliche Namensgebung für Controller verwenden: related SO answer

2. Andernfalls könnten Sie die cancel Funktion auf dem $scope Variable in createOrEditPropertyModal setzen.

Gerade createOrEditPropertyModal.js ändern:

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

zu

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

3. Sie Funktionen modals ähnlich wie Richtlinien passieren kann: related SO answer