2016-05-28 4 views
1

Если я вернуть следующий из функции директивы:Bind изолированного объема директивы к внутреннему объекту объема контроллера

return { 
    scope: { 
     sometag: "=" 
    }, 
    link: link 
} 

И я установить директиву следующим образом:

<div myDirective sometag="david"> </div> 

И У меня есть эта строка в моем контроллере:

$scope.david = {firstName: "david", lastName: "McGee"}; 

Тогда из функции ссылки директивы я могу это сделать:

console.log(scope.sometag.firstName + " " + scope.sometag.lastName); 

Но что, если у меня есть коллекция в моем контроллер, может быть что-то вроде этого:

$scope.movies = { 
    aNewHope: { title: "A New Hope", rating: 4}, 
    theEmpire: { title: "The Empire Strikes Back", rating: 5}, 
    returnOfJedi: { title: "Return of the Jedi", rating: 3} 
} 

И я хочу, чтобы указать свою директиву в кино в этой коллекции, так что если мой директива имеет это в его функции ссылка:

console.log(scope.movie.title + " has rating of " + scope.movie.rating); 

это как изолированный объем:

return { 
    scope: { 
     movie: "=" 
    } 
} 

И я устанавливаю его, как это:

<div myDirective movie="aNewHope"> </div> 

Тогда появится следующая консоль:

A New Hope has rating of 4 

Может быть, проще говоря, как я хожу в одном дополнительный шаг в области контроллера, поэтому я буду иметь доступ к нему в изолированной области действия директивы?


Чтобы сделать вещи более ясно, мое полное намерение заключается в следующем:

Коллекция я имел в виду это ответ от сервера. Затем я использую ng-repeat для заполнения списка. Я также хочу привязать к каждому элементу этого списка событие клика, которое будет запрашивать больше данных об этом фильме, используя movieID (ключ в вышеупомянутой коллекции). Поэтому я решил вместо этого ng-repeat повторить <li> элементов, я скажу ему повторить элемент <my-directive>, и я свяжусь с событием клика оттуда. Мне просто нужно указать мою директиву, какой аргумент я отправляю в функцию. Я хотел бы, чтобы функция выполнялась под областью контроллера, а не из директивы.

+0

Действительно зависит от более подробной информации о том, как вы планируете использовать всю коллекцию .... или если вы намерены представить только один предмет. Например, в 'ng-repeat' у вас уже есть доступ к экземпляру элемента массива, определенный в повторном quesry – charlietfl

+0

Я фактически использую его с ng-repeat. Я не понимаю, что вы имели в виду, когда сказали, что у меня уже есть доступ к экземпляру элемента массива. Я отредактировал мой вопрос, чтобы добавить больше информации о моей конечной цели. –

ответ

0

Когда вы пишете это

<div myDirective movie="aNewHope"> </div> 

'aNewHope' относится к (unexistent) свойство $ объекта в области видимости контроллера.

console.log(scope.movie) // -> undefined 

Поскольку вы пытаетесь дать изолят прицел вашей директивы имя свойства, вы должны передать его в виде строки.

Существует два разных способа сделать это.

(1) Подайте его через Угловое выражение

<div myDirective movie="{{ "aNewHope" }}"> </div> 

или (2) Переменная "MovieTitle" установлен ключ фильма в виде строки

$scope.movieTitle = "aNewHope" 

<div myDirective movie="movieTitle"> </div> 

Однако это приведет к получению следующего вывода в консоли:

undefined has rating of undefined 

Как вы могли догадаться, это потому, что cope.movie 'теперь настроен на строку, и у нее нет свойств «имя» или «рейтинг». То, что вы пытаетесь получить, является собственностью коллекции, которая находится в контроллере. Но из-за изолированной области действия директива не имеет к ней доступа. В первом примере вы передали свою директиву весь объект «david», поэтому он смог получить доступ к его свойствам. Вы можете сделать то же самое с вашей коллекцией:

Теперь коллекция доступна из области изоляции. Затем вы можете использовать квадратные скобки для получения свойства объекта из переменной.

console.log(scope.movies[movie].title + " has rating of " + scope.movies[movie].title); 
Смежные вопросы