Question

嗨大家好我想编写一个角度指令，将输入文本编码为html。这样就可以转换关键字符。例如ö - ＆gt; ＆安培; ouml
我找到了this漂亮的库，我想用它。

我的问题是我想只在我的模型中进行此转换。用户不应该看到任何内容。

现在我尝试过这种方式。但这不符合我的要求。我是棱角分明的新手并不熟悉指令。也许你可以帮助我。

angular.module('schwimmfestivalAngApp')
    .directive('encodedInput', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, ctrl, he) {

                element.bind('onblur',
                    function () {
                        ctrl.$modelValue = he.encode(ctrl.$viewValue, {
                            'useNamedReferences': true
                        });
                    }
                )
                ;

            }
        };
    });

Answer 1

这绝对不是初学者的任务，因为您需要有更多使用Angular的经验才能使其按预期工作。

在Angular指令中操作视图和模型之间的数据有两个部分。可以从模型转换为视图，另一个转换从视图转换为模型。基本上，您应该在两个方向上操作数据，因此当您的模型包含满足您要求的操纵值时，您的视图会显示某些内容。

模型⇒查看

您应该实施$render功能来帮助这一部分：

ngModelController.$render = function() {
    ...
}

查看⇒模型

这部分可能会实现几件事。您方案中最重要的事情可能是调用$setViewValue函数

element.on("blur", function(evt) {
    ngModelController.$setViewValue(...);
});

由于我们希望更改数据模型值而不是查看模型值，因此命名可能会有点误导，但直接从文档中读取此摘录：

调用$setViewValue时，新值将暂存，以便通过$parsers和$validators管道进行投放。如果没有指定特殊ngModelOptions，则直接发送阶段值进行处理，最后应用于$modelValue，然后应用ng-model属性中指定的表达式。最后，调用$viewChangeListeners列表中的所有已注册的更改侦听器。

但是还有指令解析器可以在将视图值提交给模型之前对其进行操作。

ngModelController.$parsers.push(customParser);

function customParser(value) {
    return /* some value */;
}

文档详细信息

请务必仔细阅读ngModelController documentation。

重要提示

确保通过仅添加控制台日志来实现本文档中提到的其他几个要点，以便掌握指令执行周期。

Answer 2

感谢Robert的提示。我想我现在已经弄明白了。

对我来说它有效，但似乎并不是完美的方式。

现在这是我的指令如何查找的。

ActiveRecord::StatementInvalid: PG::UndefinedColumn: ERROR:  column "taggable" of relation "taggings" does not exist
LINE 1: INSERT INTO "taggings" ("taggable") VALUES ('onetag1 (Lead)'...
                                ^
: INSERT INTO "taggings" ("taggable") VALUES ('onetag1 (Lead)')

Angular Js指令转换输入

2 个答案:

模型⇒查看

查看⇒模型

文档详细信息

重要提示