Question

我希望在表单输入中使用masking。我创建了一个指令uiMask，它采用预定义的屏蔽格式，如DoB或zip。为了启动屏蔽，我在指令的link函数中应用了屏蔽。为了更新模型，我使用$apply上的keyup手动触发摘要周期。这种方法是否正确？

angular.module('formApp', [])
.controller("DemoFormController",['$scope',function($scope){
	
}])
.directive('uiMask', [
  function () {
    return {
      require:'ngModel',
      scope: {
      	type : "@uiMask"
      },
      controller: function($scope){
      	$scope.dob = "99/99/9999";
      	$scope.zip = "99999";
      },
      link:function ($scope, element, attrs, controller) {

      	var $element = $(element[0]);
      	$element.mask($scope.$eval($scope.type));
        /* Add a parser that extracts the masked value into the model but only if the mask is valid
         */
        controller.$parsers.push(function (value) {
          var isValid = value.length && value.indexOf("_") == -1;
          return isValid ? value : undefined;
        });
        /* When keyup, update the view value
         */
        element.bind('keyup', function () {
          $scope.$apply(function () {
            controller.$setViewValue(element.val());
          });
        });
      }
    };
  }
]);

<!doctype html>
<html ng-app="formApp">
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.3.1/jquery.maskedinput.js"></script>
</head>
<body>
  <div ng-controller="DemoFormController" class="container">
    {{employee | json}}
    <input type="text" class="form-control" id="dob" name="dob" placeholder="Date of Birth" ui-mask="dob" ng-model="employee.dob">
    <input type="text" class="form-control" id="zip" placeholder="Zip" ui-mask="zip" ng-model="employee.zip" >
  </div>
  
</body>

</html>

Answer 1

我做了类似的事情，将jQuery“plugin”（uniform.js）放入angular指令中。我认为如果你将$watch附加到元素上会有所帮助。以下是我为统一指令所做的事情：

(function () {
'use strict';

    angular.module('pfmApp').directive('uniform', function($timeout) {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function(scope, element, attrs, ngModel) {
                $(element).addClass('uniform').uniform();
                //$(element).uniform.update();
                scope.$watch(function() { return ngModel.$modelValue }, function() {
                    $timeout(jQuery.uniform.update, 0);
                });
            }
        }
    });

}());

我希望这有助于或者指向正确的方向。

将jquery蒙板输入集成为angularjs指令

1 个答案: