AngularJS Directive with Scope data array

Question

i've a array. Every item of the array holds data for an directive. The array is created inside a controller.

The Model

$scope.myDirectiveData = 
          [ { title: "First title", content: "First content" }, 
            { title: "Second title", content: "Second content" } ];

The Directive Template

<div class="MyDirective">
   <h1>{{myDirectiveData.title}}</h1>
   <p>{{myDirectiveData.content}}</p>
</div>

How should i implement the the directive to create a item for any item in the array ? Something like...

<MyDirective data-ng-repeat="item in myDirectiveData"></MyDirective>

j_walker_dev · Accepted Answer · 2013-09-23 17:12:22Z

Here is an example using a directive. It used ng-repeat to call your directive for each object in the array on your scope. In this fiddle is this what you are looking for.

http://jsfiddle.net/gLRxc/4/

angular.module('test', [])

.directive('myDirective', function () {
    var template = '<div class="MyDirective">' +
        '<h1>{{ data.title }}</h1>' +
        '<p>{{ data.content }}</p>' +
        '</div>';
    return {
        template: template,
        scope: {
            data: '='
        },
        link: function (scope, element, attrs) {

        }

    };
})

.controller('TestController', function ($scope) {

    $scope.myDirectiveData = [
            { title: "First title", content: "First content" },
            { title: "Second title", content: "Second content" }
        ];


})
;

Html Edited: the ng-repeat is on the same line as the directive like your question states.

<div ng-app="test" ng-controller="TestController">
     <div my-directive data="item" ng-repeat="item in myDirectiveData"></div>
</div>

Mike Driver · Accepted Answer · 2013-09-23 16:48:17Z

0

<div ng-repeat="item in myDirectiveData">
  <h1>{{item.title}}</h1>
  <p>{{item.content}}</p>
</div>

answered Sep 23, 2013 at 16:48

Mike Driver

8,5113 gold badges38 silver badges37 bronze badges

Collectives™ on Stack Overflow

AngularJS Directive with Scope data array

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