使用指令过滤输入答案

【问题标题】：Filter input with directive使用指令过滤输入
【发布时间】：2013-09-29 10:05:27
【问题描述】：

html

<input type="text" name="usernr" ng-model="userNr" placeholder="user nr"
                               tabindex="2" ng-usernumber/>

javascript

app.directive('ngUserNumber', function() {
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function(scope, elm, attrs, ctrl) {
                    console.log("inside directive");
                    ctrl.$parsers.push(function(data) {
                        console.log("//convert data from view format to model format");

                        data = data.toString() + " test";

                        return data; //converted
                    });

                    ctrl.$formatters.push(function(data) {
                        console.log("//convert data from model format to view format");

                        data = data.toString() + " test";

                        return data; //converted
                    });
                }
            };
        });

我想用指令内部的数据替换 ng-model 提供的数据。但什么也没有发生。为什么不使用自定义指令？

我关注了这个文档：http://www.ng-newsletter.com/posts/directives.html
其他来源：https://stackoverflow.com/a/15346236/489856

【问题讨论】：

链接函数是否被调用\执行？
否（不执行日志）
你在html中的指令名应该是mg-user-number
错字？ ng-usernumber 将被规范化为 ngUsernumber 而不是 ngUserNumber。
@rogerz jep 就是这样

标签： angularjs

【解决方案1】：

就那样做吧：

var app = angular.module('MyApp', []);

app.controller('MyCtrl', function($scope){

  });

app.directive('ngUsernumber', function() {
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function(scope, elm, attrs, ctrl) {

                    var format = function(data){
                        console.log("//convert data from view format to model format");

                        if(data !== undefined){
                          data = data.toString() + " test";
                        }


                        return data; //converted
                    };

                    ctrl.$parsers.push(format)
                    ctrl.$formatters.push(format);

                }
            };
        });

在这里工作：http://plnkr.co/edit/iA85KC?p=preview

您的指令注释必须尊重 CamelCase：ngUsernumber -> ng-usernumber 如果您执行 ngUserNumber -> ng-user-number

希望对你有帮助！

【讨论】：

您的 plnkr，看起来不错。但是没有附加“测试”？
我已经更新了 plunlkr，如果你在输入下查看好的字符串是 print
ng-model = 双重绑定。那么为什么只有段落显示“yourtypedstring test”而输入字段没有向ng-Model添加测试？

【解决方案2】：

为了反映对当前输入的更改，您需要调用

ctrl.$setViewValue(transformedInput);
ctrl.$render();

找到解决方案here

引用docs:

在任何情况下，传递给方法的值都应该始终反映控件的当前值。例如，如果您为输入元素调用$setViewValue，则应该传递输入 DOM 值。否则，控件和范围模型将不同步。同样重要的是要注意$setViewValue 不会调用$render 或以任何方式更改控件的DOM 值。如果我们想以编程方式更改控件的 DOM 值，我们应该更新 ngModel 范围表达式。它的新值将被模型控制器拾取，它将运行它通过$formatters、$render更新DOM，最后调用$validate。

【讨论】：