Angular directive with ng-repeat in template

Question

I'm experimenting with angular 1.2 directives. Mine has a template w/ ng-repeat. The variable passed in param does not seem to be seen by the directive. Here is the code:

Fiddle: http://jsfiddle.net/supercobra/vmH3v/

Controller:

angular.module('myApp', [])
.controller('Ctrl', ['$scope', function($scope) {
    $scope.labels=
        [{name:"abc", color:'blue'},
            {name:"xxx", color:'red'}];                   
}])

.directive('prettyTag', function() {
 return {
 restrict: 'E',
 scope: {labelsArray: '@'},
   template: '<h2>Label list:{{labelsArray}}:</h2><div class="label label-warning" ng-repeat="label in labelsArray">{{label.name}}</div>',

restrict: 'E',
};

});

HTML:

<div ng-app="myApp" ng-controller="Ctrl">
  label Array: {{labels}}
  <hr>
  <pretty-tag labelsArray='{{labels}}'></pretty-tag>
  <hr>
</div>

Answer 1

There are a few things that need to be changed for the directive to see the labels array.

First, change the pretty-tag HTML to this:

<pretty-tag labels-array='labels'></pretty-tag>

Note that labelsArray was changed to labels-array (directive & attribute names should follow this dashed convention) and {{labels}} was simply changed to labels (so that a bi-directional binding can be established on the array).

Next, inside your directive, the labelsArray scope should be '=' so that the local scope property can reference the parent scope property:

scope: {labelsArray: '='},

Fiddle: http://jsfiddle.net/Hmcj8/