Wie informieren ChildController innerhalb ParentController in AngularJS

Question

Ich habe einen Code ähnlich dem folgenden Code:

<div ng-controller="ParentController"> 
    <button>A</button> 
    <button>B</button> 
    <button>C</button> 
    <div ng-controller="ChildController"> 
     <ul> 
      <li ng-repeat="name in nameList">{{name}}</li> 
     </ul> 
    </div> 
</div> 

ChildController Bereich als Standard ausgeblendet ist. Ich möchte den untergeordneten Bereich anzeigen, wenn eine der Schaltflächen im übergeordneten Bereich angeklickt wurde. Außerdem muss ich verschiedene Funktionen auf der geklickten Schaltfläche aufrufen und dann das Ergebnis $scope.nameList innerhalb ChildController zuweisen und dann Daten anzeigen. Ich frage mich, was wäre die beste Praxis, um diesen Job zu machen.

Answer 1

Sie können eine $broadcast Methode auf die $scope verwenden, um dies zu tun oder eine einfache $scope Vererbung. Beginnen wir mit dem ersten Ansatz.

HTML:

<div ng-controller="ParentController"> 
    <button ng-click="showSection('sectionA')">Show Section A</button> 
    <button ng-click="showSection('sectionB')">Show Section B</button> 
    <div ng-controller="ChildController"> 
     <section ng-if="showSection.sectionA">SOME CONTENT HERE</section> 
     <section ng-if="showSection.sectionB">SOME CONTENT HERE</section> 
    </div> 
</div> 

ParentController:

function ParentControler($scope) { 

    $scope.showSection = function (section) { 
     $scope.$broadcast('ParentController.showSection', section); 
    } 

} 

ChildController:

function ChildController($scope) { 

    $scope.showSection = { 
     sectionA: false, 
     sectionB: false 
    }; 

    $scope.$on('ParentController.showSection', (event, section) => { 
     $scope.showSection[section] = true; 
    } 

} 

Oder Sie könnten ve Verwenden Sie einfach $scope Vererbung, die in diesem Fall mehr als genug wäre.

HTML wäre identisch mit dem vorherigen Beispiel.

ParentController:

function ParentControler($scope) { 

    $scope.showSection = { 
     sectionA: false, 
     sectionB: false 
    }; 

    $scope.showSection = function (section) { 
     $scope.showSection[section] = true; 
    } 

} 

ChildController:

function ChildController($scope) { 

    // 

} 

Es hängt davon ab, was Sie versuchen, auf lange Sicht zu erreichen. Wenn Sie nach einer einfachen Lösung suchen, nur um diesen König der Sache zu tun, verwenden Sie die $scope Vererbung. Wenn Sie eine komplexere Kommunikation zwischen diesen beiden Controllern benötigen, können Sie sich für die Ereignismethode anmelden.