1

假设，我想对文本输入应用屏蔽功能。可能是正确地设置电话号码输入的样式（例如，对于 input 5553334444，它将输出(555) 333-4444），或者只是将输入控件中的值大写。

我知道的方法使用ngModel控制器（通过）并在函数中require: "ngModel"设置新的大写：$viewValue$parser

ngModel.$parsers.unshift(function(val){
  var uppercase = val && val.toUpperCase();
  if (uppercase !== val){
    ngModel.$setViewValue(uppercase);
    ngModel.$render();
  }
  return uppercase;
});

但是现在，假设我想使用ng-model-options="{debounce: 400}"，因为我不想太快地触发模型的变化：

<input ng-model="foo" ng-model-options="{debounce: 400}"
       ng-change="doBackendQuery(foo)"
       uppercase>

在上面的示例中，我不想触发doBackendQuery太快，因为它会进行 HTTP 调用。debounce会阻止这种情况发生，但也会阻止uppercase指令立即执行，导致用户看到小写文本。

问：如何编写uppercase指令来$viewValue立即更改，而无需等待debounce？

（注意：我不想对底层 DOM 元素做出假设——这会违背 DOM-agnostic 的想法ng-model）

笨蛋

4

3 回答 3

2

A hacky solution (untested):

<input ng-model="foo" ng-model-options="{debounce: 400}"
   ng-change="doBackendQuery(foo)"
   uppercase style="text-transform: uppercase;">

You could also potentially change your uppercase directive to set that style automatically, or use css:

input[uppercase] {
    text-transform: uppercase;
}
于 2015-03-02T06:29:27.250 回答
1

这对我有用：

app.directive('capitalize', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, modelCtrl) {
            element.on('input', function() {
                var capitalized = element.val().toUpperCase();
                element.val(capitalized);
                modelCtrl.$setViewValue(capitalized);
            });

            modelCtrl.$parsers.push(function(value) {
                return value.toUpperCase();
            });
        }
    };
});
于 2016-07-25T15:09:06.187 回答
0 

(function(){

    angular
        .module('example', [])
        .directive('uppercase', [function(){
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function(scope, iElem, iAttrs, ngModel){

                    iElem.on('input', function(){
                        var elem = angular.element(this),
                            valOrigin = elem.val();
                        
                        val = toUpperCase(valOrigin);

                        elem.val( val );

                        ngModel.$viewValue = toLowerCase(valOrigin);
                    });

                    ngModel.$parsers.push(function(value){
                        value = toLowerCase(value);

                        return value;
                    });

                    ngModel.$formatters.push(function(value){
                        value = toUpperCase(value);

                        return value;
                    });

                    function toLowerCase(value){
                        return (value + '').toLowerCase();
                    }

                    function toUpperCase(value){
                        return (value + '').toUpperCase();
                    }

                }
            }
        }])
        .controller('ExampleController', [function() {
            
            var vc = this;

            vc.user = {
                name: 'let\' start!'
            };

        }]);

    angular
        .bootstrap(document, ['example']);

})();
<script src="https://code.angularjs.org/1.4.7/angular.min.js"></script>

<div ng-controller="ExampleController as example">
  <form name="userForm">

    <label>Name:
      <input type="text" name="userName" uppercase ng-model="example.user.name" ng-model-options="{debounce: 500}" />
    </label>

    <p>Name: <span>{{ example.user.name }}</span></p>

  </form>
</div>

于 2016-01-30T08:35:14.523 回答