javascript - 使用指令显示范围内的数据

Question

我试图理解指令是如何工作的，但我很快就遇到了一个错误。

我已经为我的示例创建了代码笔 here

我创建了一个名为 movies 的范围，其中包含 3 部电影。我想通过指令显示这些标题。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.movies = [
    {
      title: 'Star Wars',
      release_date: '10-11-2015'
    }, {
      title: 'Spectre',
      release_date: '25-12-2015'
    }, {
      title: 'Revenant',
      release_date: '02-03-2016'
    }
  ];
});

我已经创建了一个指令。

app.directive('movieOverview', function () {
  return {
    template: 'Name: {{movie.title}}',
    controller: 'MainCtrl'
  };
});

这是 haml 代码，

%html{"ng-app" => "plunker"}
  %body{"ng-controller" => "MainCtrl"}
    %movie-Overview

自从 Name: 显示在页面上以来，该指令确实(有点)起作用。只是不是来自范围的结果。

Answer 1

因为没有名称为 movie 的范围变量，您应该遍历每个对象，这样您就可以访问 movies 的每个元素，然后您可以显示movie 名称，方法是将您的模板更改为以下内容。

template: '<div ng-repeat="movie in movies">Name: {{movie.title}}</div>',

另外指令应该使用 small-case 就像 movie-overview 而不是 movie-Overview

或

如果您不想更改指令，那么请更改指令并使用 ng-repeat 对其进行迭代，这样您就不需要更改指令

%html{"ng-app" => "plunker"}
  %body{"ng-controller" => "MainCtrl"}
    %movie-overview {"ng-repeat" => "movie in movies"}