Угловые JS, Директивы, не отображающие DATA

Question

Довольно новый для ANGULAR !!

Я создал «директиву» с именем «contactCard». То, что я пытаюсь достичь с помощью этой директивы, чтобы отобразить некоторые данные json. Но, к сожалению, данные не отображаются.

[WORKING CODES ARE PLACED HERE ON PLUNKER]

У меня есть этот HTML:

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

И MainAPP файл:

(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;     
     }); 
}); 
})(); 

Наконец 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"); 
      } 
     }; 
    }); 

Answer 1

Я думаю, ваша проблема в том, что вы привязываете «данные» в своей области к уведомлениям, но используете «уведомления» в своем шаблоне директивы.

Шаблон директива должна быть:

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

Answer 2

Если вы заявляете, что data является переменной в Вашей области, как вы делали здесь:

scope: { 
    data: '=' 
}, 

Затем в шаблоне, вы должны использовать data, а не notifications:

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

Когда вы объявляете свой объем как это, это означает, что это «Изолированная область». Он знает только переменные, которые вы указали для него. Он не знает внешнего мира.

Вы можете почитать больше об этом here.