使用controllerAs的ngScope的Angular指令

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属性而不是$ scope ...

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

Plunker