Question

ANGULAR的新手!!

我创建了一个＆＃34;指令＆＃34;命名为＆＃34; contactCard＆＃34;。我在这个指令的帮助下试图显示一些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>',

当你宣布这样的范围时，这意味着它是一个＆＃34;隔离范围＆＃34;。它只知道您为它声明的变量。它不了解外面的世界。

您可以阅读有关此here的更多信息。

Angular JS，指令不显示数据

2 个答案: