Logo Questions Linux Laravel Mysql Ubuntu Git Menu

Angular directive with ng-repeat in template

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/


angular.module('myApp', [])
.controller('Ctrl', ['$scope', function($scope) {
        [{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',



<div ng-app="myApp" ng-controller="Ctrl">
  label Array: {{labels}}
  <pretty-tag labelsArray='{{labels}}'></pretty-tag>
like image 849
supercobra Avatar asked Mar 23 '23 16:03


1 Answers

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/

like image 198
tdakhla Avatar answered Mar 25 '23 07:03