Question

我的代码类似于以下代码：

  <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区域。我想在父区域内的其中一个按钮单击时显示子区域。此外，我需要根据单击的按钮调用不同的函数，然后将结果分配给$scope.nameList内的ChildController，然后显示数据。我想知道做这项工作的最佳做法是什么。

Answer 1

您可以在$broadcast上使用$scope方法执行此操作，或使用简单的$scope继承。让我们从第一种方法开始。

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

}

或者你可以简单地使用$scope继承，在这种情况下绰绰有余。

HTML与上一个示例相同。

<强> ParentController：

function ParentControler($scope) {

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

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

}

<强> ChildController：

function ChildController($scope) {

    //

}

这取决于你长期想要达到的目标。如果您正在寻找一个简单的解决方案来做这件事，请使用$scope继承。如果您需要在这两个控制器之间进行更精细的通信，则可以选择使用事件方法。

如何在Angularjs中通知ParentController中的ChildController

1 个答案: