javascript - 使用 controllerAs 的 ngScope Angular 指令

Question

我正在尝试制作一个简单的指令，它是对象的编辑器和选择器的组合。

在精简的示例中，用户应该能够在指令中编辑 person，并最终选择一个绑定(bind)到 ng-model 的人，这样他们引用他们选择的人。

我的问题是我不确定将 ng-model 绑定(bind)到我 Controller 上的选定人员的最佳方法。

我在这里为此创建了一个插件: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];
    }
  }

在我的指令 Controller 中，vm.people 是所有人员的数组。 vm.person 是当前选择的人，我想将其绑定(bind)到消费者作为 ng-model 传递的任何内容。

使用指令会是这样的

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

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

在我的 Controller 中，我知道 $scope.ngModel 是他们传入的对象，我可以更改它或其他任何内容，但是将其绑定(bind)到的最佳/最简单方法是什么我的 Controller 的 vm.person?

让我按照我想要的方式工作的唯一方法是观察选择元素何时更改其选择，然后手动设置 $scope.ngModel = vm.person，感觉就像错误的方法。

我可以得到一些方法来实现我想要的吗？

Answer 1

在 Angular 1.3 中，您可以使用 bindToController 告诉指令将隔离范围值绑定(bind)到 Controller 实例。有了它，ngModel 现在作为 person 属性附加在 Controller 实例上，而不是 $scope...

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

Plunker