angleディレクティブ - 双方向データバインディングの問題

Question

カスタム角度ディレクティブの作成について学習しています。ここでは、双方向データバインディングを使用したいと思っています。しかし運がない。

アイデアは非常にシンプルです：私たちは人のリストを持っています。それらの中からひとりを選ぶと、選択した人の名前（詳細）を自分のディレクティブに表示します。
作成したメインコントローラー：

(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" 
     } 
    ]; 
}; 
})(); 

作成された指令
ここ https://plnkr.co/edit/xQJAWcYcscOaaNs8VlAI?p=preview

は私がやっていることです：私は多くのコードを貼り付ける前に

は、ここに私の例のplunkerです：

(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' 
    } 
}; 
})(); 

**人の詳細コントローラを作成：**

(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> 

は残念ながら、データバインディングは、私は、その項目を見ることができるにもかかわらず、機能していませんが選択されています。私はここで間違って何をしていますか？

編集：
あなたの答えのすべてが私のpersonDetail.htmlからNG-コントローラを削除した、しかし私はそれを維持したいと思います（現在はそれが唯一の結合1つのマイナーが含まれている、まだ私はより多くの機能を追加したいそこのようなボタンのクリックなど）。

コントローラーは持ち運びできますか？

Answer 1

マークアップ：

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

とディレクティブのテンプレートにとして使用ng-controller="personDetail as vm"の言及を削除しますようにすることを渡しますこれは、双方向バインディングを保持します。あなたは、ほとんどがあった

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>

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 
} 

：

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

Answer 4

。 私はあなたがとても好きにバインドしたいオブジェクトを指定する必要がindex.htmlには、あなたのplunkr
を更新：

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

personDetail.jsファイルは必要ありません。 personDetail.htmlではvm.person.nameをperson.nameに置き換える必要があります。 ところで、角度1.5以降では、やや使いやすいangular-componentsを使用することができます。