Question

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

Answer 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 - ＆gt; ng-usernumber如果你做ngUserNumber - ＆gt; NG-用户数

希望它有所帮助！

Answer 2

为了反映当前输入的变化，您需要调用

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

找到解决方案here

引自docs：

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

使用指令过滤输入

2 个答案: