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

Question

我有一个Typescript 指令类和一个控制器类，如下所示。我想在Typescript controller 类中的isolated scope 变量上设置一个watch。我无法访问控制器类中的 isolated scope 变量。

我该怎么做？

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