Angular with ng-repeat in a template

Question

I am experimenting with angular 1.2 directives. Mine has a w / ng-repeat pattern. The variable passed in the parameter is apparently not considered a 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 you need to change for a directive to see an array of labels.

Modify the HTML with good tags first:

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

Note that labelArray was changed to label-array (directive and attribute names must follow this dashed convention), and {{labels}} was simply changed to labels (so that bidirectional binding could be set in the array).

Next, inside your directive, scopeArray scope must be '=' so that the local scope property can refer to the property of the parent scope:

 scope: {labelsArray: '='}, 

Violin: http://jsfiddle.net/Hmcj8/