AngularJS에서 컨트롤러 상속

이 글은 AngularJS의 컨트롤러 계승을 주목하고 속성과 방법이 어떻게 계승되는지 이해합니다.네스트된 컨트롤러의 속성은 어떻게 계승됩니까? ==속성 값은 문자열입니다.
 

myApp.controller("ParentCtrl", function($scope){
    $scope.name = "darren";
})

myApp.controller("ChildCtrl", function($scope){

})

<div ng-controller="ParentCtrl">
    <label> name </label> <input ng-model="name" />
    <div ng-controller="ChildCtrl">
         <label> name </label> <input ng-model="name" />
         
         <ul>
            <li>child controller name: {{name}}</li>
            <li>parent controller name: {{$parent.name}}</li>
         </ul>
    </div>
</div>

 
이상, ParentCtrl의name 필드는ChildCtrl에 의해 공유되지만, ChildCtrl의name 필드 값을 바꾸면 ParentCtrl의name 값에 영향을 주지 않습니다. ChildCtrl의name 값을 바꾸면 ParentCtrl과ChildCtrl의 플러그인 관계가 깨지고 ParentCtrl의name 필드 값을 다시 바꾸어도 ChildCtrl의name 값에 영향을 주지 않습니다.이상, ParentCtrl의 변수에 값을 부여하는 것은 문자열 형식입니다. ParentCtrl의 필드에 값을 부여하는 대상 유형은? ==속성 값은 객체
 

myApp.controller("ParentCtrl", function($scope){
    $scope.vm = {
        name: "John"
    };
})

myApp.controller("ChildCtrl", function($scope){

})

<div ng-controller="ParentCtrl">
    <label> vm.name </label> <input ng-model="vm.name" />
    <div ng-controller="ChildCtrl">
         <label> vm.name </label> <input ng-model="vm.name" />
         
         <ul>
            <li>child controller name: {{vm.name}}</li>
            <li>parent controller name: {{$parent.vm.name}}</li>
         </ul>
    </div>
</div>

 
이상, ParentCtrl의 vm 대상은 ChildCtrl에 의해 공유되고, 당연히 대상의name 필드도 공유되며, ChildCtrl의 vm를 변경할 때.name 값은 ParentCtrl에 영향을 미칩니다. 즉, ParentCtrl과 ChildCtrl 사이의 중첩 관계를 깨뜨리지 않습니다.플러그인 컨트롤러의 방법은 어떻게 계승됩니까?
 

myApp.controller("ArrayCtrl", function($scope){
    $scope.myArray = ["John", "Andrew"];
    
    $scope.add = function(name){
        $scope.myArray.push(name);
    }
})

myApp.controller("CollectionCtrl", function($scope){

})

<div ng-controller="ArrayCtrl">
    <label>My Array:</label><span>{{myArray}}</span>
    
    <label>parent controller:</label>
    <input ng-model="parentName" />
    <button ng-click="add(parentName)">Add New Item</button>
    
    <div ng-controller="CollectionCtrl">
        <label>child controller:</label>
        <input ng-model="childName" />
        <input type="number" ng-model="index" />
        <button ng-click="add(childName)">Add New Item</button>
    </div>
</div>

 
ArrayCtrl에서add 방법을 사용하여 문제 없음 추가하기;그리고 ArrayCtrl에서의add 방법도 CollctionCtrl에서 사용할 수 있습니다.그리고 하위 컨트롤러에서 부모 컨트롤러의 방법을 다시 쓸 수 있습니다.
 

myApp.controller("CollectionCtrl", function($scope){
    // 
    $scope.add = function(name, index){
        $scope.myArray.splice(index,0, name);
    }
})

<div ng-controller="ArrayCtrl">
    <label>My Array:</label><span>{{myArray}}</span>
    
    <label>parent controller:</label>
    <input ng-model="parentName" />
    <button ng-click="add(parentName)">Add New Item</button>
    
    <div ng-controller="CollectionCtrl">
        <label>child controller:</label>
        <input ng-model="childName" />
        <input type="number" ng-model="index" />
        <button ng-click="add(childName, index)">Add New Item</button>
    </div>
</div>