ui-mask和$ parser/$格式化程序在同一個指令中不起作用

我正在嘗試將AngularJS ui-mask和$ parser/$ formatters集成到同一個目錄中，以便有一個完整的指令來處理所有的我的日期輸入。 ui-mask似乎編譯正確，但我無法從鏈接函數的$ parser中獲取正確的模型值。

這裏是我的普拉克：https://plnkr.co/edit/DOA7h7XxrvngsMAIzc5P?p=preview

<!DOCTYPE html> 
<html> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-mask/1.8.1/mask.min.js"></script> 
<body> 

<script> 
    var app = angular.module('myApp', ['ui.mask']); 

    app.controller('myCtrl', function() { 
     var vm = this; 
    }); 

    app.directive('myDate', ['$compile', '$filter', myDate]); 

    function myDate($compile, $filter) { 
     var directive = { 
      restrict: 'E', 
      require: 'ngModel', 
      scope: { 
       ngModel: "=" 
      }, 
      compile: compile, 
      link: link 
     }; 

     return directive; 

     function compile(element, attrs) { 
      return function(scope, element, attrs) { 
       scope.keyup = function(key) { 
        if (key === 68) { 
         console.log("D key!"); 
        } 
       }; 

       var template = '<input class="' + attrs.class + '" ng-model="ngModel" ui-mask="99/99/9999" ng-keyup="keyup($event.keyCode)" type="text">'; 

       element.html(template); 
       element.removeClass(attrs.class); 

       $compile(element.contents())(scope); 
      } 
     } 

     function link(scope, element, attrs, ngModel) { 
      ngModel.$parsers.push(function(data) { // view to model 
       var year = data.substr(-4); 
       var month = data.substr(2, 2); 
       var day = data.substr(0, 2); 
       var sep = '-'; 
       data = (year && month && day) ? Date.parse(year + sep + month + sep + day) : ''; 
       return data; 
      }); 

      ngModel.$formatters.push(function(data) { // model to view 
       data = $filter('date')(data, 'dd/MM/yyyy'); 
       return data; 
      }); 
     } 
} 
</script> 

<div ng-app="myApp" ng-controller="myCtrl as vm"> 

    <my-date ng-model="vm.myValue"></my-date> 
    <p>myValue model: {{vm.myValue}}</p> 
    <i>(myValue correct for 01/01/1985: 473385600000)</i> 

</div> 

</body> 
</html>

舉例來說，如果我寫的「1985年1月1日」我想在輸出有「473385600000」。

你能幫助我嗎？

來源

2016-03-14 wizzy

我回答我自己有我創辦瞭解決的問題，這裏是plunkr：

https://plnkr.co/edit/uKHApunRK9muCGCE5uXx?p=preview

app.directive('myDate', ['$filter', myDate]); 

function myDate($filter) { 
    var directive = { 
     restrict: 'E', 
     template: template, 
     require: 'ngModel', 
     scope: {}, 
     link: link 
    } 

    return directive; 

    function template(element, attrs) { 
     var template = '<input ng-model="date" ng-keyup="keyup($event.keyCode)" ui-mask="99/99/9999" type="text" '; 

     if (attrs.class) { 
      template += 'class="' + attrs.class + '"'; 
      element.removeClass(attrs.class); 
     } 

     template += '/>'; 

     return template; 
    } 

    function link(scope, element, attrs, ctrl) { 
     scope.keyup = function(key) { 
      if (key === 68) { // D key 
       scope.date = $filter('date')(new Date(), 'ddMMyyyy'); 
      } 

      ctrl.$setViewValue(scope.date); 
     }; 

     ctrl.$formatters.push(function(data) { // model to view 
      data = $filter('date')(data, 'ddMMyyyy'); 
      return data; 
     }); 

     ctrl.$parsers.push(function(data) { // view to model 
      var year = data.toString().substr(-4); 
      var month = data.toString().substr(2, 2); 
      var day = data.toString().substr(0, 2); 
      var sep = '-'; 
      data = (year && month && day) ? Date.parse(year + sep + month + sep + day) : ''; 
      return data; 
     }); 

     /*scope.$watch('date', function() { 
      ctrl.$setViewValue(scope.date); 
     });*/ 

     ctrl.$render = function() { 
      scope.date = ctrl.$viewValue; 
     }; 
    } 
}

基本上我已經添加了一個渲染功能來更新我的內部範圍的日期VAR ，如果需要的話，我寫了一個$ watch函數來保持模型的更新。

來源

2016-03-16 20:50:01 wizzy

ui-mask和$ parser/$格式化程序在同一個指令中不起作用

回答

相關問題