AngularJS 指令范围数据 Ng-Repeat

Question

I'm passing data from app to directive and trying to render that data passed on $http result. I can see the value of the array when I log it in the directive's scope, but I can't get the list items to render.

import angular from 'angular';
(function () {
  'use strict';

  angular
    .module('app', [])
    .controller('HomeCtrl', ['$http', '$scope', HomeCtrl])
    .directive('animals', [
      '$http',
      function ($http) {
        return {
          restrict: 'E', 
          controller: function ($scope) {
            console.log('&&&');
            console.log($scope);
          },
          template:
            '<li class="service-item ng-repeat="animal in testData">' + 
            '{{animal.label}}' +
            '</li>'
        };
      }
    ]);
    

  /**
   * Home controller.
   * @param {*} $scope
   */

  function HomeCtrl($http, $scope) {
    $scope.testData = [];

    //get mock data for testData
    $http.get('lib/testData.json').then(function (response) {
      $scope.testData = response.data;
    });

  }
})();

http://plnkr.co/edit/rY0ns6RyOJS82f28?open=lib%2Fscript.js&deferRun=1

Answer 1

你缺少一个双引号，它是li class="service-item"