Angular Directive with ngScope using controllerAs

Question

我試圖做一個簡單的指令，它是對象的編輯器和選擇器的組合。

在修剪下來的例子中，用戶應該能夠在指令中編輯person，並最終選擇一個人，該人綁定到ng-model，以便他們參照他們選擇的人。

我的問題是我不確定將ng-model綁定到我的控制器上的選定人員的最佳方式。

我創建了一個plunker這個位置：http://plnkr.co/edit/usWpu82VXHIE3R2vgHgv?p=preview

這裏是我的指令看起來像

angular 
    .module('pe') 
    .directive('personEditor', PersonEditorDirective); 

    function PersonEditorDirective() { 
    var directive = { 
     restrict: 'E', 
     templateUrl: 'personEditor.html', 
     controller: PersonEditorCtrl, 
     controllerAs: 'vm', 
     scope: { 
     ngModel: '=' 
     } 
    }; 

    PersonEditorCtrl.$inject = ['$scope', 'dataservice']; 
    return directive; 

    function PersonEditorCtrl($scope, dataservice) { 
     var vm = this; 
     $scope.vm = vm; 

     vm.people = dataservice.getPeople(); 
     //set selected to the first 
     vm.person = vm.people[0]; 
    } 
    } 

在我的指令控制器，vm.people是所有的人的數組。 vm.person是當前選定的人，我希望被綁定到任何消費者傳遞的ng-model。

使用該指令將是這樣的

<person-editor ng-model='vm.selectedPerson'></person-editor> 

<span>The currently selected person is {{vm.selectedPerson.name}}</span> 

在我的控制器，我知道$scope.ngModel是，他們已經通過的對象，我可以更改或什麼，但什麼是最好/最簡單方式來獲得綁定到我的控制器的vm.person？

我得到這種工作方式的唯一方法就是觀察select元素何時改變它的選擇，然後手動設置$scope.ngModel = vm.person，這感覺就像是錯誤的做法。

我可以得到一些實現我想要的方法嗎？

Answer 1

在Angular 1.3中，可以通過bindToController告訴指令將隔離範圍值綁定到控制器實例。有了它，ngModel則會附着作爲控制器實例，而不是$範圍person財產...

var directive = { 
    restrict: 'E', 
    templateUrl: 'personEditor.html', 
    controller: PersonEditorCtrl, 
    controllerAs: 'vm', 
    scope: { 
    person: '=ngModel' 
    }, 
    bindToController: true 
}; 

Plunker