How to access typescript directives isolated scope value in typescript controller class?

Question

I have a Typescript directive class and a controller class like below. I want to set a watch on isolated scope variable in the Typescript controller class. I am not able to access the isolated scope variables inside the controller class.

How can I do that?

My directive class:

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

and my controller class is

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


  }

}

Not used to TypeScript, but showParameters is on the scope, not on the controller, so it should probably be this.$scope.$watch(() => $scope.showParameters or this.$scope.$watch('showParameters'. — JB Nizet
– JB Nizet, Commented Apr 26, 2015 at 13:23
If you are using angular v1.3 or later, you can use the bindToController option on your directive which will associate your directive's scope to your controller. — Brocco
– Brocco, Commented Apr 26, 2015 at 17:09

Radim Köhler · Accepted Answer · 2015-04-26 13:29:55Z

3

We can create interface for our isolated scope and pass it into controller:

// 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) ...
        });
    }
 ...

edited Apr 26, 2015 at 13:29

answered Apr 26, 2015 at 13:24

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3648235 · Accepted Answer · 2015-05-19 12:48:26Z

1

I did follow your advise here but I keep having this error: Error: [$injector:unpr] Unknown provider: IUwAuthorityScopeProvider <- $scope

answered May 19, 2015 at 12:48

user3648235

2096 silver badges14 bronze badges

1 Comment

libin jose chemperi Over a year ago

You can use something like this.$scope["showParameters"].property. it works

Collectives™ on Stack Overflow

How to access typescript directives isolated scope value in typescript controller class?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related