Question

-1

AngularJS Directive with Scope data array

rated 0 times [ 1] [ 2] / answers: 1 / hits: 18436 / 11 Years ago, mon, september 23, 2013, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

moriah

Add To Favorites

Follow

Total Points: 201

Total Questions: 100

Total Answers: 82

Location: Tuvalu

Member since Sun, Sep 4, 2022

2 Years ago

moriah questions

1 How to correctly block IP adresses in Node.JS server app?

Mon, Aug 17, 20, 00:00, 4 Years ago

1 How to Integrate Dropzone.js with ASP.NET Core MVC?

Tue, Nov 12, 19, 00:00, 5 Years ago

1 How to find count of a div containing specific value in React, Jest and Enzyme

Sun, Oct 20, 19, 00:00, 5 Years ago

1 Replace content of tag with class in javascript

Wed, Aug 7, 19, 00:00, 5 Years ago

1 How to split html string using JavaScript

Tue, Jul 9, 19, 00:00, 5 Years ago

View All

answered 11 Years ago nikhilh · Accepted Answer

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>