Angular JS and passing complex object array as attribute to directive

Question

I am having trouble passing this complex object array through an attribute to a directive. What I am doing wrong and why is it wrong?

jsfiddle

Cut and pasted code

<div ng-controller="MyCtrl">
    <pass-object obj="obj"></pass-object>
</div>

var myApp = angular.module('myApp',[]);

myApp.directive('passObject', function() {
    return {
        restrict: 'E',
        scope: { obj: '=' },
        template: '<div ng-repeat="foo in foos">Hello, {{foo.prop}}!</div></div>'
    };
});

myApp.controller('MyCtrl', function ($scope) {
    $scope.obj = [{ prop: "hello" }, {prop: "world"}];
});

Patrick · Accepted Answer · 2014-12-29 20:46:21Z

5

You are iterating over foos in your directive template. You didn't pass in foos, you passed in obj. Try this:

myApp.directive('passObject', function() {
    return {
        restrict: 'E',
        scope: { obj: '=' },
        template: '<div ng-repeat="o in obj">Hello, {{o.prop}}!</div></div>'
    };
});

Updated fiddle.

answered Dec 29, 2014 at 20:46

Patrick

6,9783 gold badges25 silver badges31 bronze badges

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

Comments

dfsq · Accepted Answer · 2014-12-29 20:45:50Z

3

There is no scope property named foos, it should be obj according to your scope definition scope: { obj: '=' }:

template: '<div ng-repeat="foo in obj">Hello, {{foo.prop}}!</div></div>'

Or you can change scope config to:

scope: { foos: '=obj' },

answered Dec 29, 2014 at 20:45

dfsq

193k26 gold badges244 silver badges261 bronze badges

Collectives™ on Stack Overflow

Angular JS and passing complex object array as attribute to directive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related