如何访问打字稿指令隔离的范围值在打字稿控制器类中

Question

我有一个Typescript指令类和一个控制器类，如下所示。我想在 Typescript 控制器类中的隔离范围变量上设置一个监视。我无法访问控制器类中的隔离范围变量。

我该怎么做？

我的directive课：

module Sgm.Workspace.Web.Users {
  "use strict";
  export class UwAuthority implements ng.IDirective {
    restrict = "E";
    replace = false;
    templateUrl = "/app/features/users/uwAuthority.html";
    scope = {
      showParameters: '=showParameters'
    };
    controller = UwAuthorityController;
    //controllerAs = "vm";
    link(scope: ng.IScope, element: ng.IAugmentedJQuery, attr: ng.IAttributes, controller: UserParametersController): void {
    }
    static instance(): ng.IDirective {
      return new UwAuthority();
    }
  }
  angular.module("workspaceApp")
    .directive("showUwAuthority", UwAuthority.instance)
    .controller("UwAuthorityController", ['userService', '$scope', (userService: Sgm.Workspace.Web.Services.IUserService, $scope: ng.IScope) => new UwAuthorityController(userService, $scope)]);
}

我的controller课是

module Sgm.Workspace.Web.Users {
  export interface IUwAuthorityController {
    loadFinancingType(): void;
  }
  export class UwAuthorityController implements IUwAuthorityController {
    public modernBrowsers: any = [];
    public outputBrowsers: any = [];
    public localLang: any = [];
    public showParameters: boolean;
    static $inject = ['userService', '$scope'];
    constructor(
      private userService: Services.IUserService,
      private $scope: ng.IScope) {
      var vm = this;
      var a = this.showParameters;
      this.loadFinancingType();
      this.$scope.$watch(() => this.showParameters, (oldValue: string, newValue: string) => {
        console.log("showParameters")
      });
      this.$scope.$watch(() => this.outputBrowsers, (oldValue: string, newValue: string) => {
        this.tellmeItChanged(oldValue, newValue);
      });
    }
    public loadFinancingType = (): void => {
      this.modernBrowsers = [{
        name: "JUMBO 5/1 LIBOR ARM EVERBANK",
        ticked: false
      }];
      this.localLang = {
        selectAll: "All",
        selectNone: "None",
        reset: "Reset",
        search: "Search...",
        nothingSelected: "Select"
      }
    }
    private tellmeItChanged(oldValue: string, newValue: string) {
      if (oldValue !== newValue) {
        if (this.outputBrowsers.length > 1) {
          document.getElementById('plan').childNodes[0].childNodes[0].nodeValue = this.outputBrowsers.length + ' Selected';
        }
      }
    }
  }
}

Answer 1

我们可以为隔离的作用域创建接口并将其传递给控制器：

// the custom scope interface
export interface IUwAuthorityScope extends ng.IScope
{
    showParameters: boolean;
}
// the controller interface
export interface IUwAuthorityController 
{
    loadFinancingType(): void;
}

export class UwAuthorityController implements IUwAuthorityController 
{
    // here we inform compiler, that injected '$scope' will be of 
    // our custom type - IUwAuthorityScope
    constructor(
        private userService: Services.IUserService,
        private $scope: IUwAuthorityScope) 
    {
        ... 
        // here we can watch whatever we expect to be in the $scope 
        this.$scope.$watch("showParameters", showParms => {
            // here we can access fully type $scope variables
            if(this.$scope.showParameters === true) ...
        });
    }
 ...

Answer 2

我确实在这里遵循了您的建议，但我一直遇到此错误：错误： [$injector：unpr] 未知提供程序： IUwAuthorityScopeProvider <- $scope