Question

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

我已经创建了我的示例here

的codepen

我创建了一个名为电影的范围，里面有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＆amp;的每个元素。然后，您可以通过将模板更改为以下来显示movie名称。

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

同样指令应该使用small-case，而不是movie-overview而不是movie-Overview

或

如果您不想更改指令，请执行更改指令＆amp;使用ng-repeat进行迭代，这样您就不需要更改指令

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

Answer 2

我看到了一些问题。

首先，在模板中，您指的是movie.title，而在控制器中，您可以创建一个对象数组并将其指定给电影。您只看到Name:而不是电影标题的原因是因为电影在范围中不存在。如果您将指令更改为

app.directive('movieOverview', function () {
  return {
    template: 'Name: {{movies[0].title}}',
    controller: 'MainCtrl'
  };
});

你应该看到电影阵列中第一部电影的标题。

其次，我想你要显示所有电影，因为你有一组电影。最简单的方法是在模板中放置ng-repeat指令。所以，如果你想要显示所有电影做这样的事情

app.directive('movieOverview', function () {
  return {
    template: '<p ng-repeat="movie in movies">Name: {{movie.title}}</p>',
    controller: 'MainCtrl'
  };
});

这将为您阵列中的每部电影重复<p>标记，您应该会在页面上看到三部电影的列表。

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

2 个答案: