zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    期待着一个目标 和一个新生
    做一个真正意志坚强的人
    从猫叫、老鼠跑和人醒看观察者模式
    再看C++(6)操作符重载
    英尺
    再看C、C++、数据结构(三)
    一道比较有意思的打印题(不需要会很多计算机语言知识,简单的C就行)
    再看C++(四)const的终极使用
    再看C、C++、数据结构(二)
    再看C语言和数据结构(一)
  • 原文地址:https://www.cnblogs.com/darrenji/p/5151973.html
Copyright © 2011-2022 走看看