Angularjs binding array element ng-repeat in directive

Question

I'm trying to display the elements of an array using ng-repeat and a directive. The directive part is important to the solution. However the element of the array is not getting bound and displays an empty value.

The fiddle can be found at http://jsfiddle.net/qrdk9sp5/

HTML

<div ng-app="app" ng-controller="testCtrl">
    {{chat.words}}
    <test ng-repeat="word in chat.words"></test>    
</div>

JS

var app = angular.module('app', []);
app.controller("testCtrl", function($scope) {
    $scope.chat = {
        words: [
            'Anencephalous', 'Borborygm', 'Collywobbles'
        ]
    };
});
app.directive('test', function() {
    return {
        restrict: 'EA',
        scope: {
            word: '='
        },
        template: "<li>{{word}}</li>",
        replace: true,
        link: function(scope, elm, attrs) {}
    }
});

OUTPUT

["Anencephalous","Borborygm","Collywobbles"]
•
•
•

Expected output

["Anencephalous","Borborygm","Collywobbles"]
•Anencephalous
•Borborygm
•Collywobbles

Appreciate your help

Anik Islam Abhi · Accepted Answer · 2016-01-13 10:31:33Z

5

You didn't bind word.

You have used isolate scope. If you don't bind with it's scope property,it won't work.

scope: {
    word: '='
},

Try like this

<test word="word" ng-repeat="word in chat.words"></test>

DEMO

edited Jan 13, 2016 at 10:31

answered Jan 13, 2016 at 10:29

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Le Phuc Tai · Accepted Answer · 2016-01-13 10:57:16Z

0

var app = angular.module('dr', []);
app.controller("testCtrl", function($scope) {
    $scope.chat= {words: [
      'Anencephalous', 'Borborygm', 'Collywobbles'
    ]};
});
app.directive('test', function() {
    return {
        restrict: 'EA',
        scope: {
            word: '='
        },
        priority: 1001,
        template: "<li>{{word}}</li>",
        replace: true,        
        link: function(scope, elm, attrs) {             
        }
    }
});

Your directive needs to run before ng-repeat by using a higher priority, so when ng-repeat clones the element it is able to pick your modifications.

The section "Reasons behind the compile/link separation" from the Directives user guide have an explanation on how ng-repeat works.

The current ng-repeat priority is 1000, so anything higher than this should do it.

edited Jan 13, 2016 at 10:57

answered Jan 13, 2016 at 10:41

Le Phuc Tai

13 bronze badges

1 Comment

MeanGreen Over a year ago

Could you please add some explanation to the code? Why will this solve the issue?

Collectives™ on Stack Overflow

Angularjs binding array element ng-repeat in directive

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related