When creating a templated directive in Angular using TypeScript your scope interface not only represents what is coming into the directive, it also ends up representing what you need to bind to the view.
For instance, given the following HTML.
<my-widget my-title="vm.title"></my-widget>
The TypeScript directive might look like this.
module widgets {
'use strict';
export interface IWidgetScope extends ng.IScope {
myTitle: string;
}
export class Widget implements ng.IDirective {
public templateUrl = 'app/widgets/widget.html';
public restrict = 'E';
public scope: {[key: string] : string} = {
'myTitle': '=',
};
public link: (scope: IWidgetScope, element: ng.IAugmentedJQuery,
attrs: ng.IAttributes) => void;
static factory(): any {
/* @ngInject */
var directive = () => {
return new Widget();
};
return directive;
}
constructor() {
this.link = (scope: IWidgetScope,
element: ng.IAugmentedJQuery,
attrs: ng.IAttributes) => {
var init = () => {
scope.handleAction = () => {
scope.myTitle='clicked';
};
scope.$apply();
};
element.ready(init);
}
}
}
}
In widget.html you would have something like this.
<div ng-click="handleAction">
<span>{{title}}</span>
</div>
The problem here is that the compiler will complain that handleAction is not a member of the IWidgetScope interface.
2339 Property 'handleAction' does not exist on type 'IWidgetScope'.
What is the recommended way of handling this situation? It seems like the problem is that the IWidgetScope is being forced to serve both sides external and internal.
Is this possible, or is any preferred?
