Angular typescript指令，在元素链接中查找div

Question

我在Angular中使用了typescirpt。

我已经创建了一个指令，它只是一个包含文本的div和一个带有类名'block- close‘的关闭按钮

我需要给close按钮添加一个点击功能。

如何向指令中的按钮添加单击事件。

我试过像这样的东西

    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());

    })();

Answer 1

我只是假设你的"mysite.html“有这样的代码

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

并且你想要处理点击事件，因为添加的按钮有"block-close“类。

实际上，在链接函数中，可以访问该指令作用域，因此只需添加一个如下所示的函数，

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

更新你的"mysite.html“，如下所示

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