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>
  • 相关阅读:
    Java IO学习3:字节字符转换流
    Java IO学习8:System类对IO的支持
    设计模式(一)单例模式
    复制excel下拉框的数值
    iis7.5+win2008 出现 HTTP Error 503. The service is unavailable.
    php显示当前数据库名称
    解决secureCRT显示中文为乱码
    Microsoft OLE DB Provider for ODBC Drivers 错误 '80040e23 ' [Microsoft][ODBC SQL
    jquery textSlider 文字滚动
    donetcms与Discuz整合的webconfig设置
  • 原文地址:https://www.cnblogs.com/darrenji/p/5151973.html
Copyright © 2011-2022 走看看