Angularjs 使用指令筛选输入

html

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

我跟着这个医生：

---

其他来源：

像这样做：

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

在这里工作：

您必须遵守指令注释的CamelCase：如果您执行ngUsernumber->ng user number，则必须遵守ngUsernumber->ng user number

---

希望有帮助

就这样做：

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

在这里工作：

您必须遵守指令注释的CamelCase：如果您执行ngUsernumber->ng user number，则必须遵守ngUsernumber->ng user number

---

希望有帮助

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

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

                }
            };
        });

找到解决方案

引自：

在任何情况下，传递给方法的值都应始终反映控件的当前值。例如，如果要为输入元素调用

$setViewValue

，则应传递输入DOM值。否则，控件和作用域模型将变得不同步。还需要注意的是，

$setViewValue

不会调用

$render

或以任何方式更改控件的DOM值。如果我们想以编程方式更改控件的DOM值，我们应该更新

ngModel

范围表达式。它的新值将由模型控制器拾取，模型控制器将通过

$formatters

，

$render

运行它以更新DOM，最后对其调用

$validate

---

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

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

                }
            };
        });

找到解决方案

引自：

在任何情况下，传递给方法的值都应始终反映控件的当前值。例如，如果要为输入元素调用

$setViewValue

，则应传递输入DOM值。否则，控件和作用域模型将变得不同步。还需要注意的是，

$setViewValue

不会调用

$render

或以任何方式更改控件的DOM值。如果我们想以编程方式更改控件的DOM值，我们应该更新

ngModel

范围表达式。它的新值将由模型控制器拾取，模型控制器将通过

$formatters

，

$render

运行它以更新DOM，最后对其调用

$validate

---

是否正在调用\执行链接函数？否（未执行日志）html中的指令名称应为

mg user number

Typo

ng usernumber

将标准化为

ngUsernumber

而不是

ngUsernumber

@rogerz-jep，该链接函数正被调用\执行？否（日志未被执行）html中的指令名应为

mg user number

Typo

ng usernumber

将标准化为

ngUsernumber

而不是

ngUsernumber

@rogerz-jep您的plnkr看起来正常。但是“test”没有被附加？我已经更新了plunlkr，如果您查看输入下的好字符串是printng model=double binding。那么为什么只有段落显示“yourtypedstring测试”，而inputfield没有将测试添加到ng模型中呢？您的plnkr看起来不错。但是“test”没有被附加？我已经更新了plunlkr，如果您查看输入下的好字符串是printng model=double binding。那么，为什么只有段落显示“yourtypedstring测试”，而inputfield没有将测试添加到ng模型中呢？