角度控制器（和作用域）继承如何工作

Question

我试图弄清楚控制器继承是如何工作的。我有三个控制器：

var myApp = angular.module('app', []);

myApp.controller('MainController', ['$scope', function($scope) {
    $scope.name = 'main';
    $scope.getName = function() {
        return $scope.name;
    };
}]);
myApp.controller('Child1', ['$scope', function($scope) {
    $scope.name = 'child1';
}]);
myApp.controller('Child2', ['$scope', function($scope) {
    $scope.name = 'child2';
}]);

和我的看法

<div ng-app='app'>
    <div ng-controller='MainController'>
        <div ng-bind='getName()'></div>

        <div ng-controller='Child1'>
            <div ng-bind='getName()'></div>

            <div ng-controller='Child2'>
                <div ng-bind='getName()'></div>
            </div>
        </div>
    </div>
</div>

但它们都显示“主要”。我该如何解决？

这是一个小提琴http://jsfiddle.net/g3xzh4ov/3/

Answer 1

这是一个如何在Angular中扩展控制器的示例。

myApp.service('baseCtrl', function () {
  this.name = 'base';
  this.getName = function() {
    return this.name;
  };
});

myApp.controller('MainController', ['baseCtrl', function (baseCtrl) {
  angular.extend(this, baseCtrl);
  this.name = 'main';
}]);
myApp.controller('Child1', ['baseCtrl', function (baseCtrl) {
  angular.extend(this, baseCtrl);
  this.name = 'child1';
}]);
myApp.controller('Child2', ['baseCtrl', function (baseCtrl) {
  angular.extend(this, baseCtrl);
  this.name = 'child2';
}]);

它要求使用controllerAs，它取代$scope有this，它是这样的情况特别好。

注意service，它是new在幕后使用的，而不是其他Angular服务类型的用法，因此this...可以将语句从控制器直接带到单独的服务。

有几种执行控制器继承的方法。

关于原始代码，Angular中没有“控制器继承性”。和$scope原型继承假设

$scope.getName = function() {
    return $scope.name;
};

$scope.name从定义它的上下文返回，MainController在您的情况下是函数。