1

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

4

2 回答 2

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);

                }
            };
        });

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

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

希望能帮助到你 ！

于 2013-09-24T09:29:28.847 回答
0

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

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

在这里找到解决方案

引用自文档：

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

于 2018-03-29T06:46:04.507 回答