当我使用别名时，我在AngularJS中的控制器继承不能工作
当我使用别名时，我在AngularJS中的控制器继承不能工作
提问于 2015-08-04 05:50:21
我试图在angularJS中学习控制器继承。
请遵循下面的代码
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Recipe 02 example 01</title>
<script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\AngularJS\angular.js"></script>
<script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\jQuery\jquery-1.11.1.js"></script>
<link rel="stylesheet" href="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\css\bootstrap.css"></link>
<script type="text/javaScript">
angular.module("myApp",[]);
(function(){
angular.module("myApp").controller("ParentCtrl",ParentCtrl);
angular.module("myApp").controller("ChildCtrl",ChildCtrl);
function ParentCtrl($scope){
$scope.lastName = "Bond"
};
function ChildCtrl($scope){
$scope.firstName = "James"
};
})();
</script>
</head>
<body>
<div ng-controller="ParentCtrl">
<div ng-controller="ChildCtrl">
<h3>Full name is {{firstName + " "+ lastName}}</h3>
</div>
</div>
</body>
上面的代码打印输出。
Full name is James Bond但
如果我给控制器取了别名，它就不工作了，如下面的代码所示
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Recipe 02 example 01</title>
<script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\AngularJS\angular.js"></script>
<script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\jQuery\jquery-1.11.1.js"></script>
<link rel="stylesheet" href="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\css\bootstrap.css"></link>
<script type="text/javaScript">
angular.module("myApp",[]);
(function(){
angular.module("myApp").controller("ParentCtrl",ParentCtrl);
angular.module("myApp").controller("ChildCtrl",ChildCtrl);
function ParentCtrl(){
var obj = this;
obj.lastName= "Bond"
};
function ChildCtrl(){
var obj = this;
obj.firstName = "James"
};
})();
</script>
</head>
<body>
<div ng-controller="ParentCtrl as p">
<div ng-controller="ChildCtrl as c">
<h3>Full name is {{c.firstName + " "+ c.lastName}}</h3>
</div>
</div>
</body> 输出是
Full name is James我所假设的是有一个从ChildCtrl到ParentCtrl的原型链接。就像这样
ChildCtrl.prototype = new ParentCtrl();
var c = new ChildCtrl();
console.log(" Full name is "+c.firstName+" "+c.lastName)不是吗？
请解释一下，或者给我一些建议。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-08-04 06:13:38
这两个代码段之间的区别不仅仅是给控制器命名。在第一个示例中，您在$scope上设置了属性。
function ParentCtrl($scope){
$scope.lastName = "Bond"
};
function ChildCtrl($scope){
$scope.firstName = "James"
};而在第二个片段中，您可以设置控制器本身的属性。
function ParentCtrl(){
var obj = this;
obj.lastName= "Bond"
};
function ChildCtrl(){
var obj = this;
obj.firstName = "James"
};嵌套作用域do继承原型。嵌套控制器-不。因此，将您的第二个代码片段也更改为使用$scope，它就能工作了。或者在引用属性(p.lastName)时使用正确的控制器。
要阅读的东西：https://github.com/angular/angular.js/wiki/Understanding-Scopes
Stack Overflow用户
发布于 2015-08-04 09:40:39
谢谢你指导我。现在我理解了$scope继承，我编写了正确解释的代码
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>Recipe 02 example 01</title>
<script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\AngularJS\angular.js"></script>
<script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\jQuery\jquery-1.11.1.js"></script>
<link rel="stylesheet" href="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\css\bootstrap.css"></link>
<script type="text/javaScript">
angular.module("myApp",[]);
(function(){
angular.module("myApp").controller("ParentCtrl",ParentCtrl);
angular.module("myApp").controller("ChildCtrl",ChildCtrl);
function ParentCtrl($scope){
$scope.obj = new Object();
$scope.obj.lastName = "Bond";
};
function ChildCtrl($scope){
//$scope.obj = new Object();
if("obj" in $scope){
$scope.obj.firstName = "James";
}else{
$scope.obj = new Object();
$scope.obj.firstName = "Johny";
}
};
})();
</script>
</head>
<body>
<div ng-controller="ParentCtrl">
<div ng-controller="ChildCtrl">
<h4>Full name is {{obj.firstName + " "+ obj.lastName}}</h4>
</div>
</div>
<div ng-controller="ChildCtrl">
<h3>New : {{obj.firstName}}</h3>
</div>
</body>
输出如下
Full name is James Bond
New : Johny谢谢.
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31801586
复制相关文章
相似问题
腾讯云开发者
