Angular typescript directive, find div inside element link

Question

I'm using typescirpt in Angular.

I've created a directive that is just a div containing text and a close button with a class name 'block-close'

I need to add an click function to the close button.

How do I add a click event to button that is inside the directive.

I've tried things like

    angular.element('.block-close').on('click', function(){
        alert('here');
    });

    angular.element(document).find('.block-close').on('click', function(){
        alert('here');
    });

    (()=>{

        class MyDirective implements ng.IDirective{

            public restrict = 'E';
            public scope = {};
            public controller = 'MyController';
            public controllerAs = 'myCtrl';
            public bindToController = true;
            public templateUrl = "mysite.html";

            constructor(){

            }

            link = (scope, element, attrs) => {
                angular.element('.block-close').on('click', function(){
                    alert('here');
                });
            };

        }

        angular.module('myMod').directive('myDirective', ()=> new MyDirective());

    })();

score 0 · Answer 1 · answered Nov 16 '16 at 18:50

I am just assuming that your "mysite.html" has code like this

<div>
<input type="button" value="close" class="block-close"/>
</div>

And you want to handle click event for added button has class "block-close".

Actually inside link function you can access scope of that directive so just add one function shown below,

link = (scope, element, attrs) => {
                scope.closeClicked = () =>{
                           alert("clicked..");
                     }
            };

and update your "mysite.html" like below

<div>
    <input type="button" value="close" ng-click="closeClicked()" class="block-close"/>
</div>

Angular typescript directive, find div inside element link

1 Answers1