使用Controller As方法访问inheritance范围

使用定义控制器的原始方法 ,访问父级的范围相当简单,因为子级范围原型从其父级inheritance。

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-As,上述方法不再有效。

当然,我可以通过View中的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"

问:那么正确的方法是什么?

编辑:

澄清:我不想inheritance父控制器。 我正在寻找inheritance/更改共享范围。 所以,如果我要修改第一个例子,我应该能够做到以下几点:

 app.controller("parentCtrl", function($scope){ $scope.someObj = {prop: "not set"}; }) .controller("childCtrl", function($scope){ $scope.someObj.prop = "changed"; }); 

经过研究,我得出以下的认识:

Controller-As方法不能替代使用$scope 。 两者都有自己的位置,可以/应该明智地一起使用。

  1. $scope完全符合名称所暗示的意思:即它在$scope定义ViewModel属性。 这最适合与嵌套控制器共享范围,这些嵌套控制器可以使用$scope来驱动自己的逻辑或对其进行更改。
  2. 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="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> 

你应该这样做:

HTML

 <div ng-controller="ChildController as child"> <button type="button" ng-click="child.sayMe()">Say me!</button> </div> 

JS

 var app = angular.module('myApp', []) app.controller('BaseController',function() { this.me = 'Base'; this.sayMe= function() { alert(this.me); } }); app.controller('ChildController', function($scope, $controller) { var controller = $controller('BaseController as base', {$scope: $scope}); angular.extend(this, controller); this.me = 'Child'; }); 

看看https://docs.angularjs.org/guide/controller

对于任何希望以编程方式访问父作用域的人,请使用$scope服务,查找父作用域,并访问用于父作用域的controllerAs的名称,例如:

$scope.$parent.someName.doSomething();