angular.js - angular指令中如何给模板中的子元素绑定事件？

Question

directive('mzIconTransform',['$timeout',function ($timeout) {
    return {
        scope: {
            iconSrc1: '@',
            iconSrc2: '@',
            showFlag: '=',
            clickFunc: '&'
        },
        restrict: 'EA',
        replace: true,
        transclude: true,
        template: '<p><img src="{{iconSrc1}}"  class="icon-button" ng-if="!showFlag" id="icon-off" /><img src="{{iconSrc2}}" class="icon-button" ng-if="showFlag" ng-click="clickFunc()" /></p>',
        link: function (scope, element, attr) {
            var elemChildren = element.children();
            element.bind('touchstart', function () {
                scope.$apply(function () {
                    scope.showFlag = true;
                });
                console.log("touchstart事件触发");
            });
            element.bind('touchend', function () {
                scope.$apply(function () {
                    scope.showFlag = false;
                });
                console.log("touchend事件触发");
            });
        },
    };
}] );

我想要的功能是触摸图片后，图片会变成另一张，触摸结束后又换回来，同时调用ng-click里面的方法，所以我想要给p下的第一个img添加事件，但是在link函数中好像取不到子元素，有什么办法可以取到子元素同时给他绑定事件的吗

Answer 1

element.find('img')[0] Can you get it?

Answer 2

Modify the template in compile
compile:function(iEle,iAttr){
//jquery Get the img tag under the iEle element of the template
$('img',iEle).attr('someAttr','someValue');/ /Modify an element attribute of the template, and naturally you can modify ng-click
}

Answer 3

Hello, have you solved this problem? Please solve it