AngularJS 指令范围数据 Ng-Repeat答案

【问题标题】：AngularJS Directive Scope Data Ng-RepeatAngularJS 指令范围数据 Ng-Repeat
【发布时间】：2021-09-28 13:25:46
【问题描述】：

我正在将数据从应用程序传递到指令，并尝试呈现通过 $http 结果传递的数据。当我将数组记录到指令的范围内时，我可以看到它的值，但我无法获取要呈现的列表项。

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

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

您缺少双引号，它是li class="service-item"

【讨论】：