When we try to add an ng-click function (linked to a controller action) onto an element during the compile phase, it is not working.
We can get it working if it is in the link function, but as we need a compile function, the link is not called.
Can anyone help?
HTML:
<div ng-app="editApp" ng-controller="podCtrl">
<a href="" data-model="image" data-cms-link-pod>
<img />
</a>
</div>
JS:
var module = angular.module('editApp', []);
module.directive('cmsLinkPod', function () {
return {
restrict: 'A',
scope: {
pod: '=model',
},
controller: function ($scope) {
$scope.ohai = function () {
console.log('click triggered')
event.preventDefault();
};
},
compile: function (element, attrs, transclude) {
element.find('img').attr('ng-src', '{{pod.src}}');
element.attr('data-ng-click', 'ohai()');
}
};
});
module.controller('podCtrl', ['$scope', function($scope) {
$scope.image = {
src: 'http://placekitten.com/100/100'
}
}]);
See this jsfiddle
.find('img')
– Atrix1987 22 hours ago