Custom AngularJS Directive for managing an array of Scope data

Question

Custom AngularJS Directive for managing an array of Scope data

I have an array where each item contains data for a specific directive. This array is initialized within 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 go about implementing the directive to create an instance for each item in the array? Something like...

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

javascript angularjs

Answer 1

Answer №1

An illustration showcasing the usage of a directive is provided below. Utilizing ng-repeat, your directive is invoked for each object within the array on your scope. Is this what you were searching for? Check out the demonstration in the following fiddle:

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" }
        ];
})
;

The HTML has been altered - the ng-repeat now appears on the same line as the directive, addressing your query directly.

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

Answer 2

An illustration showcasing the usage of a directive is provided below. Utilizing ng-repeat, your directive is invoked for each object within the array on your scope. Is this what you were searching for? Check out the demonstration in the following fiddle:

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" }
        ];
})
;

The HTML has been altered - the ng-repeat now appears on the same line as the directive, addressing your query directly.

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

Answer 3

Answer №2

<div ng-repeat="element in myDataDirective">
  <h2>{{element.name}}</h2>
  <p>{{element.message}}</p>
</div>

Answer 4

<div ng-repeat="element in myDataDirective">
  <h2>{{element.name}}</h2>
  <p>{{element.message}}</p>
</div>

Custom AngularJS Directive for managing an array of Scope data

Answer №1

Answer №2

Similar questions

console rendering duplication in React

Socketio: Issue: Isolated surrogate U+D83D is not a valid scalar value

Issues encountered while trying to implement HTML text within span tags

What could be causing the ng-repeat to remove the incorrect item when splicing?

issue with accessing property in vue 2 simple examination

Starting multiple JQuery UI sliders at once

Exploring Typescript within React: Creating a property on the current instance

The presence of an unauthorized token within the meteor/node module has been detected, specifically related

conceal elements using the <option> class隐藏

Animate the toggling of classes in jQuery

Encountering difficulties displaying a webpage in Express.js following a successful DELETE request

What is the best way to invoke a service within the angularJs configuration settings?

Accessing a JSON value within the AngularJS controller for the purpose of making edits

Using Ajax script to transfer user information to a php file in order to refresh the modified row in a table

Connecting one property of a JavaScript object to another property within the same JavaScript object

Create an interactive JSON tree structure

Customizing MUI DataGrid: Implementing unique event listeners like `rowDragStart` or `rowDragOver`

The only information returned from calling mongoose's Model.save() method are the fields { _id, __

What is the process of branching a stream with highland.js?

Is it more suitable for the response logic to be implemented within the saga or the reducer?