javascript - 在 Angular 中使用原型(prototype)扩展 Controller

Question

我有以下代码...

var app = angular.module('plunker', []);
TestController = function ($scope, $interval) {
  $scope.test = this;
  $scope.name = 'World';
    this.init();
    $interval(function () {
        //Added this because we shouldn't update until we either get the user data or that request fails
        $scope.test.init();
    }, 500);
};
TestController.prototype.init = function () {
    console.log("Test this thing");
};
app.controller('MainCtrl', TestController);

这很好用，但现在我需要将 init 函数包含在另一个 Controller 中，所以我希望两者都继承一个共同的原型(prototype)。但是，当我尝试this时plunker它似乎不起作用。

在 JS 中处理此类事情的正确方法是什么？

Answer 1

这是 TypeScript 示例 http://plnkr.co/edit/HOeJ7nkkp2qRl53zEvVj?p=preview

typescript :

class Controller {
  static $inject = ['$scope']; // deps

  constructor($scope) {
    $scope.vm = this;
  }

  value(): string {
    return '123';
  }
}

class NewController extends Controller {
  constructor($scope) {
    super($scope);
  }

  value(): string {
    return super.value() + '456';
  }
}

declare var angular: any;
angular.module('my', []).controller('controller', NewController);

在 JavaScript 中，它看起来像:

//Compiled TypeScript

var __extends = this.__extends || function (d, b) {
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
}

var Controller = (function () {
    function Controller($scope) {
        $scope.vm = this;
    }
    Controller.$inject = [
        '$scope'
    ];
    Controller.prototype.value = function () {
        return '123';
    };
    return Controller;
})();

var NewController = (function (_super) {
    __extends(NewController, _super);
    function NewController($scope) {
        _super.call(this, $scope);
    }
    NewController.prototype.value = function () {
        return _super.prototype.value.call(this) + '456';
    };
    return NewController;
})(Controller);

angular.module('my', []).controller('controller', NewController);

如果你需要 JavaScript 中的 OOP，请使用像 http://prototypejs.org/ 这样的东西