Attach ng-click with angular js directive

Question

I am trying to create a directive & attach ng-click with the template. So I expecting that if I click on the template it will log the statement from scope.scrollElem function, which is not happening.

I am able to create the directive but it is not responding to click.

Design approch

If this directive is attached to this DOM element, it will insert a div element before & after this DOM. This inserted div have an image (want to attach ng-click to this image) which will respond to an event.

Directive module

//rest of code
return {
    restrict: 'EAC',
    controllerAs: 'vm',
    controller: _controller,
    link: _link
 }
};

Link function

function _link(scope, elem, attrs) {
    console.log("Method Executing:Navigator._link");
    var params = scope.$eval(attrs.navparams);
    //Separate function is used to create template as 
    //the template is dependent on params value 
    scope.createNavigatorTemplate = _createNavigatorTemplate(scope, elem, params);
    scope.scrollElem = function() {
            console.log("abc");
        }
}

Creating template

function _createNavigatorTemplate(scope, elem, params, $compile) {
    params.forEach(function(item) {
        var _template = angular.element('<div class="' + item.class + '"></div>');
        var _img = angular.element('<img>').attr({
            src: item.image,
            alt: item.imageAlt,
            'ng-click':"scrollElem()" // attaching ng-click here
        });
         //appending template with element
         //_img.bind('ng-click',scope._scrollElem) //tried this but not working
        _appendTemplate(elem, item.dir, _template);
    })
}

I checked this SO question but still not able to resolve the issue.

Can you explain in general what you're trying to achieve think you're using a screwdriver as a hammer here maybe. Things like `'
'` can be easily done with bindings in the view instead, without running the element through $compile and passing a scope to the returned link function any directives on it won't be processed. — shaunhusain, May 25 '16 at 06:00
@shaunhusain I have added the design approach, you can check it — brk, May 25 '16 at 06:10

T J · Answer 1 · 2016-05-25T06:16:29.407

You need to generate the template before linking so that it gets compiled properly:

compile: function compile(tElement, tAttrs, transclude) {
  return {
    pre: function preLink(scope, iElement, iAttrs, controller) {
      var params = scope.$eval(attrs.navparams);
      //Separate function is used to create template as 
      //the template is dependent on params value 
      scope.createNavigatorTemplate = _createNavigatorTemplate(scope, elem, params);
      scope.scrollElem = function() {
        console.log("abc");
      }
    },
    post: function postLink(scope, iElement, iAttrs, controller) {
      console.log("Method Executing:Navigator._link");

    }
  }
}

Based on your approach, it looks like you are looking for a e directive having ngTransclude.

Basically you'll create a directive with your divs contaning images and transclude the content between it, like:

<div><img></div>
<div ng-translude>Content will be added here</div>
<div><img></div>

Which you can use like <my-directive>My content</my-direcive>

and the output will be

<div><img></div>
<div ng-translude>My Content</div>
<div><img></div>

score 0 · Answer 2 · answered May 25 '16 at 06:23

You need to add div in template

function _createNavigatorTemplate(scope, elem, params, $compile) {
params.forEach(function(item) {
    var _template = angular.element('<div class="' + item.class + '"</div>');
    var _img = angular.element('<img>').attr({
        src: item.image,
        alt: item.imageAlt,
         template: '<div class="arrow-left" ng-click="scrollElem()"></div>',
    });
     //appending template with element
     //_img.bind('ng-click',scope._scrollElem) //tried this but not working
    _appendTemplate(elem, item.dir, _template);
})

}

Attach ng-click with angular js directive

2 Answers2