从指令中更改ng-model值

基本上，我正在尝试为date-picker编写一个指令。在这个指令中，我使用ng-model的变量来将更改后的值反映到父控制器。但我有一些问题。我不知道如何设置ng-model变量的初始值。其次，我没有得到如何更新ng-model变量并对其进行验证。从指令中更改ng-model值

我试过这样的事情。

angular.module("mainModule.directives").directive('datePicker', function() { 
    var directive = { 
     restrict: 'E', 
     replace : false, 
     template : '<input ng-model="date" type="text"/>', 
     require : 'ngModel', 
     scope : {}, 
     link : function($scope, elem, attr, ngModelCtr) { 
      $scope.date = ngModelCtr.$viewValue; 

      function fromUser(text) { 
       $scope.date = ngModelCtr.$viewValue; 
      } 

      function toUser(text) { 
       ngModelCtr.$setViewValue($scope.date); 
      } 

      ngModelCtr.$parsers.push(fromUser); 
      ngModelCtr.$formatters.push(toUser); 
     } 
    }; 

    return directive; 
});

<date-picker ng-model="modelDate"></date-picker>

来源

2014-12-28 Vaibhav Raut

后，我改变指令的日期变量应该在NG-模型反映了变量即modelDate，还可以设置验证参数从指令 –

您需要“执行”ngModel。$ render（）'将模型值传送到视图。然后以某种方式（取决于指令的确切实现），您必须调用'ngModel。$ setViewValue（value）'来从UI更新模型。请参阅[docs]底部的示例（https://docs.angularjs.org/api/ng/type/ngModel.NgModelController）。 –

解析器来呈现viewValue与DOM和格式化程序与现有的价值工作，应该返回解析或格式化的结果，我想。您可以将ngModelController.$render设置为当值更改时将调用的函数，然后使用ngModelController.$setViewValue更新所需的值。下面是使用momentjs只更新底层模型呈现出小提琴如果输入一个有效的日期（fiddle）：

link : function(scope, elem, attr, ctrl) { 
    ctrl.$render = function() { 
     scope.date = moment(ctrl.$viewValue).format("YYYY-MM-DD"); 
    }; 
    scope.$watch('date', function(newValue, oldValue) { 
     // only update if it is a valid date string 
     var m = moment(newValue); 
     if (m.isValid()) { 
      ctrl.$setViewValue(m); 
     } 
    }); 
}

来源

2014-12-28 21:14:39

你需要

ngModelController.$render()

来源

2014-12-28 15:33:55 elaijuh

从指令中更改ng-model值

回答

相关问题