Используйте директиву для отображения данных из области

Question

Я пытаюсь понять, как работают директивы, но я быстро запутался в ошибке.

Я создал codepen моего примера here

Я создал область видимости называется кино, который имеет 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"} 

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> тег для каждого фильма в вашем массиве, и вы должны увидеть список из трех фильмов на вашей странице.