我可以inheritance父控制器的variables吗?
这是我的代码:
function ParentCtrl($scope) { $scope.people = ["Tom", "Dick", "Harry"]; $scope.count = $scope.people.length; } function ChildCtrl($scope) { $scope.parentpeople = ParentCtrl.people //this is what I would like to do ideally }
我在另一个嵌套一个angular度controller
。 我想将第一个controller
variables传递给第二个controller
。 有谁知道如何做到这一点?
注意
我不能做这样的事情
ChildCtrl.prototype = new ParentCtrl();
因为我会覆盖ChildCtrl
的people
属性。
默认情况下,子范围原型从父范围inheritance(请参阅范围 ),因此您已经可以访问子控件中的父控制器的$范围属性。 为了certificate这一点:
function ChildCtrl($scope) { alert($scope.people) }
你错了。 您将控制器inheritance与范围inheritance混合在一起,并且它们在AngularJS中不同且松散地耦合。
你真正想要的是:
function ParentCtrl($scope) { $scope.people = ["Tom", "Dick", "Harry"]; $scope.count = $scope.people.length; } function ChildCtrl($scope) { $scope.parentpeople = $scope.$parent.people; }
它会适用于这种情况:
<div ng-controller="ParentCtrl"> <div ng-controller="ChildCtrl"> </div> </div>
但是正如Mark和ganaraj注意到的那样,这没有任何意义,因为您可以从ParentCtrl和ChildCtrl访问$ scope.people的属性。
如果你想从彼此inheritance控制器,你需要使用控制器函数本身的原型inheritance。
$ scopeinheritance基于你使用ng-controller引用你的控制器的地方。
如果你有类似的东西
<div ng-controller="ParentController"> <div ng-controller="ChildController"> </div> </div>
那么是的,子控制器将inheritance父控制器的属性。
注意:子控制器不需要在html中的直接子节点上定义。 它可以是其中的任何小孩。
你也可以通过DOM获得任何控制器的范围:
$needleScope = angular.element(aDomElement).scope()
使用jQuery:
$needleScope = $('#aDomElementId').scope()
或者在文档中获取所有范围:
$allScopes = $('.ng-scope').scope()
它可能会帮助你!
范围是一个特殊的JavaScript对象,连接控制器和视图。 范围包含模型数据。 在控制器中,模型数据通过$ scope对象来访问。
<script> var mainApp = angular.module("mainApp", []); mainApp.controller("shapeController", function($scope) { $scope.message = "In shape controller"; $scope.type = "Shape"; }); </script>
范围inheritance范围是控制器特定的。 如果我们定义了嵌套的控制器,那么子控制器将inheritance其父控制器的作用域。
<script> var mainApp = angular.module("mainApp", []); mainApp.controller("shapeController", function($scope) { $scope.message = "In shape controller"; $scope.type = "Shape"; }); mainApp.controller("circleController", function($scope) { $scope.message = "In circle controller"; }); </script>
现场示例如下。
<html> <head> <title>Angular JS Forms</title> </head> <body> <h2>AngularJS Sample Application</h2> <div ng-app="mainApp" ng-controller="shapeController"> <p>{{message}} <br/> {{type}} </p> <div ng-controller="circleController"> <p>{{message}} <br/> {{type}} </p> </div> <div ng-controller="squareController"> <p>{{message}} <br/> {{type}} </p> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> <script> var mainApp = angular.module("mainApp", []); mainApp.controller("shapeController", function($scope) { $scope.message = "In shape controller"; $scope.type = "Shape"; }); mainApp.controller("circleController", function($scope) { $scope.message = "In circle controller"; }); mainApp.controller("squareController", function($scope) { $scope.message = "In square controller"; $scope.type = "Square"; }); </script> </body> </html>