Bind ng-click function in compile with AngularJS

Question

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

jsfiddle.net/js8N9/1 - u missed .find('img')

Abhishek Nandi
– Abhishek Nandi

2013-06-14 08:43:58 +00:00
Commented Jun 14, 2013 at 8:43 — Abhishek Nandi
– Abhishek Nandi, Commented Jun 14, 2013 at 8:43
@Atrix1987 please add it as answer

Maxim Shoustin
– Maxim Shoustin

2013-06-14 09:02:20 +00:00
Commented Jun 14, 2013 at 9:02 — Maxim Shoustin
– Maxim Shoustin, Commented Jun 14, 2013 at 9:02

Abhishek Nandi · Accepted Answer · 2013-06-18 05:21:38Z

0

it seems you missed to add .find('img')

Check http://jsfiddle.net/js8N9/2/

Updated: http://jsfiddle.net/js8N9/3/

edited Jun 18, 2013 at 5:21

answered Jun 14, 2013 at 12:22

Abhishek Nandi

4,2751 gold badge34 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

james.cookie Over a year ago

Yes, I could have done that, but the point was I needed to add the click to the anchor, not the image. Maybe it was not the greatest example as there would be no difference in this case, but the real world example is much more complicated and I cannot just put the click on the contents.

Abhishek Nandi Over a year ago

if thats the case why not simply add the ng-click to anchor tag see th updated fiddle

dchang · Accepted Answer · 2013-09-24 18:41:58Z

-1

If there is a compile function, it's expected that it will return the linking functions (from the AngularJS Directive documentation). I'm not sure why "controller" isn't running though - that's strange. Here's a workaround for your hopefully not too contrived example:

http://jsfiddle.net/fWVYD/

where the compile function returns the linking function.

compile: function (element, attrs, transclude) {
    ...
    //return linking function (can specify pre and post link)
    return function($scope) {
      $scope.ohai = function () {

      };  
    }
},
link: function($scope, $el, $attrs) {
    //will not be run
}

answered Sep 24, 2013 at 18:41

dchang

2,4604 gold badges24 silver badges28 bronze badges

Collectives™ on Stack Overflow

Bind ng-click function in compile with AngularJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related