CODEWITHSUNDEEP
angularjstypescript
ceth
ceth

Reputation: 45295

Pass function to directive

Here is my 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());
}

Here I am trying to use it:

dm-delete-icon(dm-action="console.log('hello');")

When I am open page I'll get 2 in the console (from link function), but I don't get the hello from the function I have passed to directive.

Why and how can I fix it?

Update:

Here is a directive template:

a.item-detail-delete-icon(class="form-image-link" href="" ng-click="dmDeleteIconVm.doAction()")

Here is HTML to which my Jade compile:

<dm-delete-icon dm-action="console.log('hello');"></dm-delete-icon>

Update 2:

I was trying to use it like this:

<dm-delete-icon dm-action="vm.foo()"></dm-delete-icon>

where:

    foo(): void {
        console.log("hello");       
    }

the function in the controller.

Update 3:

If I am trying to debug this code I will get this:

enter image description here

enter image description here

Upvotes: 0

Views: 364

Answers (1)

Ethnar
Ethnar

Reputation: 667

The problem here is that you're passing to the directive an expression console.log('hello'); that will be executed on parent controller scope.

This basically means you'd need to have console object attached to scope and under that object a method log. Angular expressions don't work with globals (console in this case) automatically.

Simply ensure that the expression you pass to the directive is a valid angular expression and that should work. For example - create new method on app scope called myConsoleLog that prints something to the console and change the attribute value for the directive to dm-action="myConsoleLog();"

Upvotes: 2

Related Questions