javascript - Attach ng-click with angular js directive -

i trying create directive & attach ng-click template. expecting if click on template log statement scope.scrollelem function, not happening.

i able create directive not responding click.

design approch

if directive attached dom element, insert div element before & after dom. inserted div have image (want attach ng-click image) respond 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 used create template      //the template 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 element          //_img.bind('ng-click',scope._scrollelem) //tried not working         _appendtemplate(elem, item.dir, _template);     }) } 

i checked so question still not able resolve issue.

you need generate template before linking 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 used create template        //the template 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 approach, looks looking e directive having ngtransclude.

basically you'll create directive divs contaning images , transclude content between it, like:

<div><img></div> <div ng-translude>content added here</div> <div><img></div> 

which can use <my-directive>my content</my-direcive>

and output be

<div><img></div> <div ng-translude>my content</div> <div><img></div>