对于想了解使用ControllerAs方法访问继承的范围的读者，本文将提供新的信息，我们将详细介绍controller方法调用，并且为您提供关于angularjs–使用Controller作为方法访问
对于想了解使用Controller As方法访问继承的范围的读者，本文将提供新的信息，我们将详细介绍controller方法调用，并且为您提供关于angularjs – 使用Controller作为方法访问继承的作用域、angularjs – 如何使用Controller As符号访问父属性、angularjs – 如何使用Controller作为语法访问$on,$emit,$broadcast方法？、AngularJS中controller控制器继承的使用方法的有价值信息。
本文目录一览：- 使用Controller As方法访问继承的范围（controller方法调用）
- angularjs – 使用Controller作为方法访问继承的作用域
- angularjs – 如何使用Controller As符号访问父属性
- angularjs – 如何使用Controller作为语法访问$on,$emit,$broadcast方法？
- AngularJS中controller控制器继承的使用方法
使用Controller As方法访问继承的范围（controller方法调用）
使用定义控制器的原始方法 ，访问父级的作用域非常简单，因为子级作用域原型继承自其父级。
app.controller("parentCtrl", function($scope){ $scope.name = "Parent";}).controller("childCtrl", function($scope){ $scope.childName = "child of " + $scope.name;});<div ng-controller="parentCtrl"> {{name}} <div ng-controller="childCtrl"> {{childName}} </div></div>Controller-As方法 似乎是声明控制器的推荐方法。但是，对于Controller-A，上述方法不再有效。
当然，我可以通过pc.nameView 访问父作用域：
<div ng-controller="parentCtrl as pc"> {{pc.name}} <div ng-controller="childCtrl as cc"> {{cc.childName}} </div></div>我确实有一些问题（意大利面条代码可能存在），但是这个问题是关于从子控制器访问父作用域的。
我看到此工作的唯一方法是：
app.controller("parentCtrl", function(){ this.name = "parent";}).controller("childCtrl", function($scope){ $scope.pc.name = "child of " + $scope.name; // or $scope.$parent.pc.name = "child of " + $scope.name; // there''s no $scope.name // and no $scope.$parent.name});因此，现在，子控制器需要了解有关“ pc”的信息，但（在我看来）这仅限于视图。我认为子控制程序不应该知道视图决定声明一个的事实ng-controller="parentCtrl as pc"。
问： 那么什么是正确的方法？
编辑：
澄清：我不是要继承父控制器。我希望继承/更改共享范围。因此，如果要修改第一个示例，则应该能够执行以下操作：
app.controller("parentCtrl", function($scope){ $scope.someObj = {prop: "not set"};}).controller("childCtrl", function($scope){ $scope.someObj.prop = "changed";});答案1
小编典典经过研究，我得出以下认识：
Controller-As方法不能代替使用
$scope。两者都有其位置，可以/应该明智地一起使用。
$scope确实执行该名称所隐含的含义：即，它在上定义了ViewModel属性$scope。这最适合与可使用$scope来驱动自己的逻辑或对其进行更改的嵌套控制器共享范围。- Controler-As将整个控制器对象定义为具有命名范围的ViewModel（通过控制器的别名）。如果View决定是否要引用特定的控制器ViewModel，则此方法仅在View（而非其他控制器）中效果最佳。
这是一个例子：
var app = angular.module(''myApp'', []);// Then the controllers could choose whether they want to modify the inherited scope or not:app.controller("ParentCtrl", function($scope) { this.prop1 = { v: "prop1 from ParentCtrl" }; $scope.prop1 = { v: "defined on the scope by ParentCtrl" }; }) .controller("Child1Ctrl", function($scope) {}) .controller("Child2Ctrl", function($scope) { // here, I don''t know about the "pc" alias this.myProp = $scope.prop1.v + ", and changed by Child2Ctrl"; });<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script><body ng-app="myApp"> <div ng-controller="ParentCtrl as pc"> <div ng-controller="Child1Ctrl"> <div>I know about the "pc" alias: {{pc.prop1.v}}</div> </div> <div ng-controller="Child2Ctrl as ch2"> <div>I only care about my own ViewModel: {{ch2.myProp}}</div> </div> </div>
angularjs – 使用Controller作为方法访问继承的作用域
app.controller("parentCtrl",function($scope){
$scope.name = "Parent";
})
.controller("childCtrl",function($scope){
$scope.childName = "child of " + $scope.name;
});
<div ng-controller="parentCtrl">
{{name}}
<div ng-controller="childCtrl">
{{childName}}
</div>
</div>
控制器 – 作为方法似乎是recommended的方式来声明控制器。但是使用Controller-As，上面的方法不再有效。
当然，我可以访问父范围与pc.name从视图：
<div ng-controller="parentCtrl as pc">
{{pc.name}}
<div ng-controller="childCtrl as cc">
{{cc.childName}}
</div>
</div>
我有一些问题(潜在的意大利面条代码)，但这个问题是关于从子控制器访问父作用域。
我能看到这个工作的唯一方法是：
app.controller("parentCtrl",function(){
this.name = "parent";
})
.controller("childCtrl",function($scope){
$scope.pc.name = "child of " + $scope.name;
// or
$scope.$parent.pc.name = "child of " + $scope.name;
// there's no $scope.name
// and no $scope.$parent.name
});
所以现在，子控制器需要知道“pc” – 除了，这应该(在我看来)被限制在视图。我不认为子控制器应该知道一个事实，一个视图决定宣布一个ng-controller =“parentCtrl as pc”。
Q：那么什么是正确的方法呢？
编辑：
澄清：我不想继承父控制器。我正在寻找继承/更改共享范围。所以，如果我修改第一个例子，我应该能够做到以下：
app.controller("parentCtrl",function($scope){
$scope.someObj = {prop: "not set"};
})
.controller("childCtrl",function($scope){
$scope.someObj.prop = "changed";
});
Controller-As approach is NOT a substitute for using
$scope. Both have their place,and can/should be used together judicIoUsly.
> $ scope完全正是名称所暗示的：即它定义了$ scope上的viewmodel属性。这最适合与可以使用$ scope驱动自己的逻辑或更改它的嵌套控制器共享范围。
> Controler-As将整个控制器对象定义为具有命名范围的viewmodel(通过控制器的别名)。这最好只在视图(但不是其他控制器)，如果视图决定是否要引用特定的控制器viewmodel。
这里有一个例子：
var app = angular.module('myApp',[]);
// Then the controllers Could choose whether they want to modify the inherited scope or not:
app.controller("ParentCtrl",function($scope) {
this.prop1 = {
v: "prop1 from ParentCtrl"
};
$scope.prop1 = {
v: "defined on the scope by ParentCtrl"
};
})
.controller("Child1Ctrl",function($scope) {})
.controller("Child2Ctrl",function($scope) {
// here,I don't kNow about the "pc" alias
this.myProp = $scope.prop1.v + ",and changed by Child2Ctrl";
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="ParentCtrl as pc">
<div ng-controller="Child1Ctrl">
<div>I kNow about the "pc" alias: {{pc.prop1.v}}</div>
</div>
<div ng-controller="Child2Ctrl as ch2">
<div>I only care about my own viewmodel: {{ch2.myProp}}</div>
</div>
</div>
angularjs – 如何使用Controller As符号访问父属性
<body ng-controller="MainCtrl as main">
<div ng-controller="ChildCtrl as child">
{{ main.parentValue }} + {{ child.childValue }}
</div>
</body>
定义我的控制器：
app.controller('MainCtrl',function($scope) {
this.parentValue = 'Main';
});
app.controller('ChildCtrl',function($scope) {
this.childValue = 'Child';
// I want to access the property of the parent controller here
});
ChildCtrl如何设置MainCtrl的name属性？这里Plunkr。
使用$ scope表示法，我可以从子控制器访问$ scope.parentValue。如何使用Controller As符号来实现相同的功能？
请参阅下面的我的代码段。
var app = angular.module('app',[]);
app.controller('MainCtrl',function($scope) {
this.name = 'Main';
this.test = {};
});
app.controller('ChildCtrl',function($scope) {
this.name = 'Child';
alert($scope.main.name);
});
<html ng-app="app">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-controller="MainCtrl as main">
<div ng-controller="ChildCtrl as child">
{{ main.name }} + {{ child.name }}
</div>
</body>
</html>
angularjs – 如何使用Controller作为语法访问$on,$emit,$broadcast方法？
(function() {
"use strict";
angular
.module("app")
.controller("Ctrl",[
"$scope",CtrlDeFinition
]);
function CtrlDeFinition($scope) {
$scope.$on("change",listenForChange);
function listenForChange(data) {
//do something
}
}
})();
但是如果我尝试使用var vm =这个语法,我被警告说,$on,$emit和$broadcast不是这个方法.如何访问它们？我还需要在控件定义中注入$scope？
(function() {
"use strict";
angular
.module("app")
.controller("Ctrl",CtrlDeFinition);
function CtrlDeFinition() {
var vm = this;
vm.$on("change",listenForChange); //$on is not a method of vm
}
})();
你可以做这样的事情,但是不会破坏不必使用$scope的目的呢？
(function() {
"use strict";
angular
.module("app")
.controller("Ctrl",CtrlDeFinition
]);
function CtrlDeFinition($scope) {
var vm = this;
vm.scope = $scope;
vm.scope.$on("change",listenForChange);
}
})();
如何使用控制器访问观察者作为语法？
不过,好消息是,与此同时注入$范围并不会改变控制器作为语法的功能,它只是让您访问生活在$scope上的所有事件管理.
值得注意的是,这是Angular 2.0中出现的主要原因之一… $scope与“Controller as”语法之间存在一个真正的问题和差异,这些语法被用来解决视图中的范围问题.
AngularJS中controller控制器继承的使用方法
前沿
最近在angularjs项目当中，看到 controller 好多都是重复性的代码，在 controller 当中有好多代码很相似 function（比如 controller 下的 CRUD 方法），重复性工作太多。后来想，可不可以提出一个service ，但仔细想想，这些CRUD 本来就是从 Service 中调用的，如果在提出Service，会造成 Service 比较混乱，职责不清晰 。 因为自己做过一些后端，借助后端的思想，是不是可以 controller 继承。
controllerservice实现继承经过一番查阅资料，发现AngularJS已经帮我们提供了controller继承。我们只需借助 controllerservice 。$controller service api
嵌套控制器中属性是如何被继承的？
==属性值是字符串
myApp.controller("ChildCtrl",function($scope){
})
<div ng-controller="ParentCtrl">
<ul>
<li>child controller name: {{name}}</li>
<li>parent controller name: {{$parent.name}}</li>
</ul>
