Below is the code for a directive:
module app.directives {
interface IDmDeleteIconController {
doAction(): void;
}
class DmDeleteIconController implements IDmDeleteIconController {
static $inject = ['$scope'];
constructor(public $scope:any) {
}
doAction() {
console.log('1');
this.$scope.dmAction();
}
}
export class DmDeleteIcon implements ng.IDirective {
templateUrl = './app/common/directives/deleteIcon/deleteIcon.html';
controller = DmDeleteIconController;
controllerAs = 'dmDeleteIconVm';
scope = {
dmAction: '&'
};
link = (scope: any, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: any) => {
console.log('2');
scope.dmAction();
}
static factory(): ng.IDirectiveFactory {
const directive = () => new DmDeleteIcon();
directive.$inject = [];
return directive;
}
}
angular.module('myApp').directive('dmDeleteIcon', DmDeleteIcon.factory());
}
This is how I am trying to implement it:
dm-delete-icon(dm-action="console.log('hello');")
Upon opening the page, I see 2 in the console (from the link function), but the hello message from the passed function is not displayed.
Any insights on why this is happening and how it can be resolved?
Update:
Here's the template for the directive:
a.item-detail-delete-icon(class="form-image-link" href="" ng-click="dmDeleteIconVm.doAction()")
The HTML generated by my Jade compiler looks like this:
<dm-delete-icon dm-action="console.log('hello');"></dm-delete-icon>
Update 2:
I attempted to use the directive as follows:
<dm-delete-icon dm-action="vm.foo()"></dm-delete-icon>
where:
foo(): void {
console.log("hello");
}
is the function defined in the controller.
Update 3:
During debugging of this code, the following output was observed: