Angular JS，指令不显示数据

Question

对 ANGULAR 相当陌生！！

我创建了一个名为 "contactCard" 的 "directive"。我试图借助此指令实现的目的是显示一些 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

我认为您的问题是您在范围内将 "data" 绑定到通知，但您在指令模板中使用了 "notifications"。

您的指令模板应该是：

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>',

当你像这样声明你的范围时，这意味着它是一个 "Isolated Scope"。它只知道你为它声明的变量。它对外界一无所知。

您可以阅读更多相关信息 here。

Angular JS，指令不显示数据

Angular JS, Directives Not Displaying DATA

angularjs

angularjs-directive