As I work with a Typescript directive class and controller class, I am facing an issue. I need to set up a watch on an isolated scope variable within the Typescript controller class, but I seem to be unable to access these isolated scope variables. How can I properly achieve this?
Below is my directive class:
module MyNamespace.Directives {
"use strict";
export class MyDirective implements ng.IDirective {
restrict = "E";
replace = false;
templateUrl = "/app/features/myDirective.html";
scope = {
showParameters: '=showParameters'
};
controller = MyController;
link(scope: ng.IScope, element: ng.IAugmentedJQuery, attr: ng.IAttributes, controller: MyController): void {
}
static instance(): ng.IDirective {
return new MyDirective();
}
}
angular.module("myApp")
.directive("myDirective", MyDirective.instance)
.controller("MyController", ['myService', '$scope', (myService: MyNamespace.Services.IMyService, $scope: ng.IScope) => new MyController(myService, $scope)]);
}And here is my controller class:
module MyNamespace.Controllers {
export interface IMyController {
loadItems(): void;
}
export class MyController implements IMyController {
public items: any = [];
public showParameters: boolean;
static $inject = ['myService', '$scope'];
constructor(
private myService: Services.IMyService,
private $scope: ng.IScope) {
var vm = this;
var a = this.showParameters;
this.loadItems();
this.$scope.$watch(() => this.showParameters, (oldValue: string, newValue: string) => {
console.log("showParameters");
});
// Additional watches and methods go here...
}
public loadItems = (): void => {
this.items = [
{ name: "Item 1", selected: false },
{ name: "Item 2", selected: true }
];
}
// Other methods for controller functionality...
}
}