2015-11-20 4 views
0

Я создал палить, чтобы проиллюстрировать мой вопрос: http://plnkr.co/edit/qwxXzIgBdb3C8MH4FleG?p=previewОшибка двухсторонней передачи данных между директивой и контроллером. Зачем?

У меня есть директивы и контроллер. Я хотел бы отправить список пользователей из контроллера в директиву. Проблем нет.

app.controller('Controller',['$scope', function($scope){ 
    $scope.users = [ 
    {name:'Jason', id:'1'}, 
    {name:'Kris', id:'2'}, 
    {name: 'John', id:'3'} 
    ]; 

    $scope.activeUser = $scope.users[0]; 
}]); 

app.directive('myDirective', function(){ 
    return { 
    restrict: 'E', 
    scope: { 
     people: '=', 
     selectedUser:'=', 
    }, 
    templateUrl:'directive.html' 
    }; 
}); 

В моем index.html Я связываю пользователей с людьми и activeUser с выбранным пользователем.

<my-directive people="users" selectedUser="activeUser"></my-directive> 

Внутри директивы находится раскрывающийся список, в котором вы можете выбрать пользователя. Я привязываю модель тега select к selectedUser и, следовательно, к activUser (или, по крайней мере, это мое понимание. Это не работает так ясно, что я чего-то не хватает).

<select ng-options="person.name for person in people" ng-model='selectedUser'> 

Когда я выбираю кого-то из выпадающего списка я ожидаю увидеть изменение отражается вне директивы в переменной activeUser, например, так:

<my-directive people="users" selectedUser="activeUser"></my-directive> 

     <p>outside of the directive:</p> 
     {{activeUser}} 

Это не происходит, хотя. Почему нет?

P.S. Я хотел бы использовать ng-change, чтобы отключить HTTP-вызов в базе данных, поэтому я не могу использовать его для работы. Что еще более важно, что я действительно ДОЛЖЕН работать, и я хотел бы понять, почему это не так.

Благодарим за помощь!

ответ

0

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

Текущего

<my-directive people="users" selectedUser="activeUser"></my-directive> 

Ожидаемого

<my-directive people="users" selected-user="activeUser"></my-directive> 

Обратите внимание на недостающую черту (-) в первой директиве выше. В результате данные от контроллера НЕ были переданы в директиву, что означает отсутствие двусторонней привязки. Это еще более заметно, когда мы понимаем, что сама директива (оба поля ввода текста, а поле выбора) не были недобросовестный Jason несмотря на то, что он был активным пользователем передается в

Обновлено plunker:. http://plnkr.co/edit/RcziLDlBneT4bjqD5BPJ

Надеюсь, это поможет!

+0

Прохладный, что работает! У вас есть объяснение, почему то, как я пытался, не работает? Мне действительно кажется, что я по существу делаю selectedUser и activeUser той же переменной.Это имеет смысл во всех исследованиях, которые я провел вокруг «=». Очевидно, это не правильно. – Tenbrink

+0

Только что обновил ответ на актуальную проблему. Не уверен, как я пропустил это, я думаю, я понял, что директива HTML не была бы проблемой! – lux

0

После много расчесывания всего, что я нашел проблему. Это, я думаю, явно самое изящное решение. Спасибо вам за помощь Lux!

<my-directive people="users" selected-user="activeUser"></my-directive> 

Извещение «выбранный пользователь» вместо «selectedUser», который у меня был в исходном plink.

http://plnkr.co/edit/dSVYj9zwK7YlS4gavgPE?p=preview

+0

Мы должны были найти это в унисон! Обновил мой ответ и увидел, что вы его нашли. Хорошая вещь! – lux

Смежные вопросы