更新模型值

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> s的处理程序。

如何在事件处理程序中更新与<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) { 
     }); 

     }); 
    } 
    }; 
}]);