從指令中更改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值

回答

相關問題