本篇关注AngularJS中的控制器继承,了解属性和方法是如何被继承的。嵌套控制器中属性是如何被继承的?==属性值是字符串 myApp.controller("ParentCtrl", function($scope){ $scope.name = &q ...
本篇关注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>
==属性值是对象
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>
嵌套控制器中方法是如何被继承的?
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>
而且在子控制器中可以重写父控制器中的方法。
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>
原标题:AngularJS中控制器继承
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。