Question

我有一个输入元素，在焦点上，我想打开一个对话框，允许用户执行复杂的选择，然后将结果返回到输入字段：

<input ng-model="vm.requestType" ng-focus="vm.getMessageType($event)">
<input ng-model="vm.responseType" ng-focus="vm.getMessageType($event)">

控制器：

function getMessageType( event ) {

  $mdDialog.show( {
        controller : 'MessageTypeController',
        controllerAs : 'vm',
        templateUrl : 'html/message-type.html',
        locals : { type : event.target.value },
        bindToController: true
      } ).then( function( type ) {

      //  this updates the DOM, but not the model
      event.target.value = type;

      // this works, but does not allow
      // me to use this function generically for 
      // several different model fields

      vm.requestType = type;

      }, function( fail ) {
  });
}

效果很好，但它只更新视图，而不是模型。如果我直接更新模型值，它可以工作，但我不能使用多个<input>的处理程序。

如何在事件处理程序中更新与<input>表单元素关联的模型值？

Answer 1

我找到了解决方案。诀窍是获取控制器，然后使用$ setViewValue和$ render（）;

<input ng-model="vm.requestType" ng-focus="vm.getMessageType($event)">
<input ng-model="vm.responseType" ng-focus="vm.getMessageType($event)">

  var controller = angular.element( event.srcElement ).controller( 'ngModel' );

  $mdDialog.show( {
    controller : 'MessageTypeController',
    controllerAs : 'vm',
    templateUrl : 'html/message-type.html',
    locals : { type : event.target.value },
    bindToController: true
  }).then( function( type ) {

    controller.$setViewValue( type );
    controller.$render();

  }, function( fail ) {

  });

这也可以作为指令实现：

angular.module('app').directive( 'selectType', [ '$mdDialog', function( $mdDialog ) {
  return {
    restrict: 'A',
    require: 'ngModel',

    link: function( scope, element, attributes, controller ) {

      element.bind( 'focus', function() {
        $mdDialog.show( {
          controller : 'MessageTypeController',
          controllerAs : 'vm',
          templateUrl : 'html/message-type.html',
          locals : { type : controller.$modelValue },
          bindToController: true
        }).then( function( type ) {

          controller.$setViewValue( type );
          controller.$render();

        }, function( fail ) {
        });

      });
    }
  };
}]);

在DOM事件处理程序

1 个答案: