Array attribute not parsing to angularjs Directive

Question

My directive is

angular.module('app').directive('authorDirective',authorDirective);
function authorDirective()
{
    return {
        restrict: 'E',
        scope: {
            Authors: '=',
            details: '&',
            name : '='
        },
        replace : true,
        template: 
        '<table class="table"><thead>'+
        '<tr><th>Name</th><th>Nationality</th><th>Dates</th></tr></thead>'+
        '<tbody ng-repeat="model in Authors">'+
        '<tr><td>{{model.Name}}</td><td>{{model.Nationality}}</td><td>{{model.Dates}}</td></tr>'+
        '</tbody></table>'
    };

}

Controller is

    angular.module('app').controller('LabController',LabController);
function LabController ()
{
    var vm = this;
    vm.Authors = [
        {Name : "Mark Twain",Nationality : "American", Dates : "1885-1910"},
        {Name : "A.A Miline",Nationality : "English", Dates : "1882-1956"},
        {Name : "Charles Dickens",Nationality : "English", Dates : "1812-1870"},
        {Name : "Jane Austen",Nationality : "English", Dates : "1775-1817"}
    ];
}

and the HTML

<!DOCTYPE html>
<html ng-app="app">

<head>
    <title>Directives</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
        crossorigin="anonymous">
</head>

<body ng-controller="LabController as vm">
    <div class="container">
        <h1>Directives</h1>
        <author-directive Authors="vm.Authors"></author-directive>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script src="./app/app.js"></script>
    <script src="./app/LabController.js"></script>
    <script src="./app/authorDirective.js"></script>
</body>

</html>

I tried to pass object via scope attribute to directive. It was working. But when I try to pass array I can't. Didn't find any error in browser console also. What Wrong did I make here? Thanks in advance for helping.

Plunker is here

Maxim Shoustin · Accepted Answer · 2017-10-22 05:14:43Z

1

Directive attributes should be low-cased: authors="vm.Authors"

Plunker Demo

AngularJS Directive DOCS

Normalization AngularJS normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

If you want to use Authors, you can write Authors: '=authors', and in DOM: <author-directive authors="vm.Authors"></author-directive>

Your Fixed Plunker

edited Oct 22, 2017 at 5:14

answered Oct 22, 2017 at 5:09

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

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

1 Comment

Newaz Sharif Over a year ago

Thank you man. Got your answer and understood explanation properly and it fixed my problem like a charm.

Collectives™ on Stack Overflow

Array attribute not parsing to angularjs Directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related