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是他们传入的对象，我可以改变它或者其他什么，但是最好/最简单的方法是将它绑定到我的控制器{{1} }？

我能按照自己的方式工作的唯一方法是观察select元素何时更改它的选择，然后手动设置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

使用controllerAs的ngScope的Angular指令

1 个答案: