AngularJS中控制器繼承

Darren Ji發表於2016-01-22
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>

 

相關文章