javascript - 如何使用 TypeScript 静态注入(inject)器模式注入(inject) `$rootScope`？

Question

所以，最后在获得一个大型模型以同时使用 angular 和 typescript 进行编译之后，我得到了这个运行时错误:

10angular.js:12314 Error: [ng:cpws] Can't copy! Making copies of Window or Scope instances is not supported. http://errors.angularjs.org/1.4.1/ng/cpws

at angular.js:68
at copy (angular.js:857)
at copy (angular.js:932)
at copy (angular.js:888)
at Scope.$digest (angular.js:15666)
at Scope.$apply (angular.js:15935)
at bootstrapApply (angular.js:1624)
at Object.invoke (angular.js:4443)
at doBootstrap (angular.js:1622)
at bootstrap (angular.js:1642)

我没有更改任何“实现”，我只是重新构建类以使用 TypeScript。在我的代码中没有任何地方可以使用 angular.copy(在整个应用程序的任何类中)。在用头撞墙之后，我偶然发现了这个问题。构造函数将 $rootScope 分配给局部变量(由于 TS，现在在原型(prototype)上)。现在，这是一种旧代码，我只是使用 $rootScope 的引用，将其用作所有使用 $rootScope.broadcast(...) 的 View Controller 的通用事件调度程序。当我使用标准 Angular 样板注入(inject)它时，它曾经工作得很好，我可以重构它......

/// <reference path="../../app/reference.ts" />
class UserModel {
  roles:string;
  activeRole:string;
  errorString:string;
  loginAttemptEmailValue:string;
  successString:string;

static $inject = ['utils', '$rootScope','$q', '$cookies', '$http','settings', '$location'];
  constructor(u,r,q,c,h,s,l) {
    this.utils = u;
    this.rootScope = r; // <---- the problem. comment-out this line and it works.
    this.q = q;
    this.cookies = c;
    this.http = h;
    this.settings = s;
    this.location = l;
  }
...

angular.module('App').service('userModel', UserModel );

但这让我担心，当我去转换我的 Controller 时，我会遇到同样的问题，只是注入(inject) $scope。

所以，我的问题是，如何使用这个 TypeScript 静态注入(inject)器模式正确地注入(inject) $scope 而不会出现这个可怕的复制错误？

我尝试创建一个类级别的静态范围变量，但是当您尝试分配给静态类型时，您当然会遇到左手分配错误。

更新:这是转译的js。

var UserModel = (function () {
    function UserModel(u, r, q, c, h, s, l) {
        var _this = this;

        this.utils = u;
        this.rootScope = r;
        this.q = q;
        this.cookies = c;
        this.http = h;
        this.settings = s;
        this.location = l;
    }
    UserModel.prototype.hasActiveRole = function (val) {
        if (this.activeRole === val) {
            return true;
        }
        return false;
    };
    //...other implementation...
    UserModel.$inject = ['utils', '$rootScope', '$q', '$cookies', '$http', 'settings', '$location'];
    return UserModel;
})();
angular.module('App').service('userModel', UserModel);

Answer 1

所以，如果其他人遇到同样的问题，请在这里回答我自己的问题。我认为这种情况可能是 Angular 错误或缺少有关将 $rootScope 分配给服务中的局部变量 的文档。

注入(inject) $scope 或 $rootScope 并分配给本地引用属性似乎工作正常，在 Controller 中 但不是服务。我还注意到您不能将 $scope 导入到服务中，也许 Angular 团队也打算阻止注入(inject) $rootScope 但忽略了这样做。

错误本身令人费解；我最好的猜想是编译中有一个工件(在 Angular 的深处)，其中服务的实例化尝试深度复制 $rootScope 属性而不是浅拷贝，当且仅当它被分配时到服务对象的属性。