巢狀控制器

Created: November-22, 2018

巢狀控制器也連結了 $scope。更改巢狀控制器中的 $scope 變數會更改父控制器中的相同 $scope 變數。

.controller('parentController', function ($scope) {
    $scope.parentVariable = "I'm the parent";
});

.controller('childController', function ($scope) {
    $scope.childVariable = "I'm the child";

    $scope.childFunction = function () {
        $scope.parentVariable = "I'm overriding you";
    };
});

現在讓我們嘗試處理它們，巢狀。

<body ng-controller="parentController">
    What controller am I? {{parentVariable}}
    <div ng-controller="childController">
        What controller am I? {{childVariable}}
        <button ng-click="childFunction()"> Click me to override! </button>
    </div>
</body>

巢狀控制器可能有它的好處，但在這樣做時必須記住一件事。呼叫 ngController 指令會建立一個新的控制器例項 - 這通常會產生混淆和意外結果。