你的位置:首页 > Java教程

[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>