Angular JS，指令不顯示數據

Question

相當新的角度！

我已經創建了一個名爲「contactCard」的「指令」。我試圖通過這個指令來實現顯示一些json數據。但不幸的是數據沒有得到顯示。

[WORKING CODES ARE PLACED HERE ON PLUNKER]

我有這個網站：

<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。