Question

I have the following code with custom directive ‘my-repeater’:

<div ng-controller="AngularCtrl">
  <div my-repeater='{{items}}'>Click here</div>
</div>​

Here is my custom directive:

myApp.directive('myRepeater', function($compile) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        var myTemplate = "<div ng-click='updateRating({{item}});' ng-class='getRatingClass({{rating}});'>{{rating}}</div>";
            var items = scope.items;
            console.log('length: ' + items.length);
            for (var i = 0; i < items.length; i++) {
                var child = scope.$new(true);
                console.log(items[i].ratings);
                child.item = items[i];
                child.rating = items[i].ratings;                    
                var text = $compile(myTemplate)(child);
                element.append(text);
            }
   }
};

});

ng-click and ng-class bindings are not happening properly inside my custom directive. Can anyone help me with what i am doing wrong here?

Here is the JS Fiddle.
http://jsfiddle.net/JSWorld/4Yrth/5/

Answer 1

Hi I’ve updated your sample to what I think you want to do.

http://jsfiddle.net/46Get/2/

• First, in directives like ng-click='updateRating({{item}});' that
  receive an expression you dont need to use ‘{{}}’ because it is
  already executed in the scope.

• Second, when you need to add siblings to your directive, you need to do it in the compilation phase and not the linking phase or just use ng-repeat for that matter