Angular JS, Directives Not Displaying DATA

Question

Fairly new to ANGULAR!!

I have created a "directive" named "contactCard". What I'm trying to achieve with the help of this directive to display some json Data. But unfortunately data is not getting displayed.

[WORKING CODES ARE PLACED HERE ON PLUNKER]

I have this html:

<ul class="digi-alert-list" ng-controller="jsonNotify">
    <li ng-repeat="notifications in notify">
        <contact-card data="notifications"></contact-card>
    </li>
</ul>

And MainAPP file:

(function () {
  var app = angular.module("MainApp", 
  ["ui.bootstrap","app.directives.contactCard"]
);
app.controller('jsonNotify', function($scope, $http) {
  $http.get('notification.json')
       .then(function(res){
          $scope.notify = res.data;                
        });
});
})();

Finally contactCard.js

angular.module('app.directives.contactCard', [])
    .directive('contactCard', function(){
        return{
            restrict: 'E',
            scope: {
                data: '='
            },

            template: '<div class="alert-report"><p>{{notifications.serveactivity}}</p></div>',
            controller: function($scope){
                alert("directives");
            }
        };
    });

shouldn't it be data.serveractivity in the directive template,. — RoyTheBoy
– RoyTheBoy, Commented Feb 6, 2015 at 10:04

thedoctor · Accepted Answer · 2015-02-06 10:01:03Z

2

I think your issue is that you are binding "data" in your scope to notifications, but you are using "notifications" in your directive template.

Your directive template should be:

template: '<div class="alert-report"><p>{{data.serveactivity}}</p></div>',

answered Feb 6, 2015 at 10:01

thedoctor

1,5181 gold badge12 silver badges13 bronze badges

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

Comments

Omri Aharon · Accepted Answer · 2015-02-06 10:01:43Z

2

If you declare that data is the variable on your scope, like you did here:

scope: {
    data: '='
},

Then in your template, you have to use data, and not notifications:

template: '<div class="alert-report"><p>{{data.serveactivity}}</p></div>',

When you declare your scope like this, it means that it's an "Isolated Scope". It knows only the variables you declared for it. It has no knowledge of the outside world.

You can read more about this here.

answered Feb 6, 2015 at 10:01

Omri Aharon

17.1k5 gold badges43 silver badges61 bronze badges

Collectives™ on Stack Overflow

Angular JS, Directives Not Displaying DATA

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