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

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>',

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

或

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

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

Answer 2

我发现了几个问题。

首先，在您的模板中您指的是 movie.title，而在您的控制器中您创建了一个 objects 数组并将其分配给电影。您只看到 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> 标记，您应该会在页面上看到包含三部电影的列表。

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

Use a directive to display data from scope

javascript

angularjs

angularjs-directive

angularjs-scope

angular-directive