угловая директива - проблема двусторонней передачи данных

Question

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

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

Перед тем, как вставить много кода, вот мой пример plunker:
https://plnkr.co/edit/xQJAWcYcscOaaNs8VlAI?p=preview

Вот что я сделал:
Создано Главный контроллер:

(function() { 
"use strict"; 
var controllerId = 'personController'; 
angular.module("app").controller(controllerId, ["$timeout", personController]); 

function personController($timeout) { 
    var vm = this; 
    vm.name = "Janko"; 
    vm.people = returnPeople(); 
    vm.selectedPerson = {}; 
    vm.selectPerson = function (person) { 
     //function to add a new Person 
     vm.selectedPerson = person; 
     console.log(vm.selectedPerson.name); 
    }; 
} 

function returnPeople() { 
    return [ 
     { 
      name: "Janko", 
      surname: "Hrasko", 
      age: 24, 
      gender: "M" 
     }, 
     { 
      name: "Jozef", 
      surname: "Mrkvicka", 
      age: 26, 
      gender: "M" 
     }, 
     { 
      name: "Janka", 
      surname: "Kratka", 
      age: 21, 
      gender: "F" 
     } 
    ]; 
}; 
})(); 

Создано Directive :

(function() { 
"use strict"; 

var app = angular.module("app"); 

app.directive('personDetail', personDetail); 
function personDetail() { 
    return { 
     scope: { 
      person: "=person" 
     }, 
     restrict: 'E', 
     templateUrl: '/js/person/templates/personDetail.html' 
    } 
}; 
})(); 

** Создан Person Detail Controller: **

(function() { 
"use strict"; 

var controllerId = 'personDetail'; 
angular.module("app").controller(controllerId, ["$scope", personController]); 

function personController($scope) { 
    var vm = this; 
    vm.person = $scope.person; 
} 
})(); 

Наконец - человек Detail.html

<div ng-controller="personDetail as vm"> 
    <h3>Selected Name:</h3> 
    <h3>{{vm.person.name}}</h3> 
</div> 

К сожалению, связывание данных не работает, несмотря на то, что я могу видеть, что пункт был выбран. Что я здесь делаю неправильно?

Edit:
Все ваши ответы удалили нг-контроллер от моей personDetail.html, однако я хотел бы сохранить его (в настоящее время она содержит только один несовершеннолетний связывания, но я хочу, чтобы добавить больше функциональных возможностей там, таких как нажатие кнопок и т. д.).

Возможно ли сохранить контроллер?

Answer 1

разметка: <person-detail person="vm.selectedPerson"></person-detail>

function personDetailsController($scope) { 
    var vm = this; 
    //vm.person = $scope.person;// This will get executed only first time. 
    //Every time you assigning different object to it. Not changing object.property 
} 

Вы можете использовать контроллер как синтаксис, а также сохранение двухстороннего связывания.

function personDetail() { 
    return { 
     scope: { 
     person: "=" 
     }, 
     bindToController: true, 
     controller:'personDetailsController', 
     controllerAs: 'vm', 
     restrict: 'E', 
     templateUrl: 'personDetail.html' 
    } 
}; 

Demo

Answer 2

Вы должны передать выбранное лицо в распоряжение. Вы указали переменную «person» в своей директиве, вам нужно передать выбранное лицо в директиву. А также вам не нужен контроллер для контроллера.

Измените объявление директивы, как это:

<person-detail person="vm.selectedPerson"></person-detail> 

Отредактировано

Также удалите контроллер в своей директиве, нет никакой необходимости для этого дополнительного контроллера.

<div> 
    <h3>Selected Name:</h3> 
    <h3>{{person.name}}</h3> 
</div> 

Я создал plunkr для демонстрации решения. Вы можете видеть это here.

Answer 3

person, с которым вы связываетесь в directive, должен быть атрибут в элементе, который вы не указали.Так передать, что, как:

<person-detail person="vm.selectedPerson"></person-detail> 

и в шаблоне директивы удалить упоминание ng-controller="personDetail as vm" использовать его как:

<div> 
    <h3>Selected Name:</h3> 
    <h3>{{person.name}}</h3> 
</div> 

Answer 4

вы были почти там. Я обновил ваш plunkr
В index.html вы должны указать объект, который вы хотели бы связать нравится так:

<person-detail person="vm.selectedPerson"></person-detail> 

Файл personDetail.js не требуется. И в personDetail.html вам нужно заменить vm.person.name на person.name. Кстати, с углового 1.5 вы можете использовать angular-components, которые несколько проще в использовании.