角度控制器(和范围)继承是如何工作的 [英] how angular controller (and scope) inheritance works

问题描述

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

var myApp = angular.module('app', []);myApp.controller('MainController', ['$scope', function($scope) {$scope.name = 'main';$scope.getName = function() {返回 $scope.name;};}]);myApp.controller('Child1', ['$scope', function($scope) {$scope.name = 'child1';}]);myApp.controller('Child2', ['$scope', function($scope) {$scope.name = 'child2';}]);

我的观点

<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>

但它们都显示主要".我该如何解决这个问题?

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

解决方案

这是一个例子 如何在 Angular 中扩展控制器.

myApp.service('baseCtrl', function () {this.name = '基地';this.getName = function() {返回 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，用this代替$scope，特别适合这种情况.

注意 service 的用法而不是其他 Angular 服务类型，它在底层使用了 new，所以 this... 语句可以直接从控制器带到单独的服务.

控制器继承有多种方式.这是另一种方法.

关于原始代码，Angular 中没有控制器继承".而 $scope 原型继承假设

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

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

I'm trying to figure out how controller inheritance works. I have three controllers:

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';
}]);

and my view

<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>

but they're all showing "main". How do I fix this?

here's a fiddle http://jsfiddle.net/g3xzh4ov/3/

解决方案

Here's an example of how controllers can be extended in 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';
}]);

It obliges to use controllerAs, which replaces $scope with this, it is especially good for such cases.

Notice the usage of service instead of other Angular service types, it uses new under the hood, so this... statements can be brought right from a controller to separate service.

There are several ways of doing controller inheritance. Here is another approach.

Regarding the original code, there is no 'controller iheritance' in Angular. And $scope prototypical inheritance assumes that

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

returns $scope.name from the context where it was defined, it is MainController function in your case.

这篇关于角度控制器(和范围)继承是如何工作的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！