简体   繁体   English

Angular 1.5自定义指令未在本机​​angular指令之前执行

[英]Angular 1.5 custom directive not being executed before native angular directives

I'm in the process of migrating from Angular 1.2.17 to Angular 1.5.8 and, and i've noticed that a directive I've wrote is not being executed anymore before any other directives as it used to be the case with Angular 1.2.17. 我正在从Angular 1.2.17迁移到Angular 1.5.8,并且我注意到我编写的指令不再像以前Angular那样在其他任何指令之前执行了。 1.2.17。 I've tried to set the priority at my directive level to 1500, even a very big value like 9999999999999999999 but no effect. 我尝试将指令级别的优先级设置为1500,即使是非常大的值(如9999999999999999999),也没有任何效果。

Any idea on how I can fix this problem? 关于如何解决此问题的任何想法吗?

Thanks 谢谢

Sample code is available here: DEMO 此处提供示例代码: DEMO

var sample = here

To see how it worked in 1.2.x just change the angular version 要查看它在1.2.x中的工作方式,只需更改角度版本

Instead of adding a DOM event handler to cleanup the input, add a $parser to the ng-model controller to do the cleanup. 无需添加DOM事件处理程序来清理输入,而是向ng-model控制器添加$parser来进行清理。

app.directive('nesCleanupInput', [function() {
  return {
    require: "ngModel",
    restrict: 'A',
    priority: 99999999999999999999999999999999999,
    link: function(scope, element,attrs,ngModel) {
      //USE $parsers pipeline
      ngModel.$parsers.push(function nesCleanup (value) {
        let cleanup = value.toUpperCase();
        element.val(cleanup);
        return cleanup;
      });
      /*
      //REMOVE DOM event handler
      element.on('change input keyup', function(event) {
        onChange (event);
      });
      */
});

The problem was that DOM event handler of the input directive was fighting the DOM event of the nes-cleanup-input directive. 问题在于input指令的DOM事件处理程序正在与nes-cleanup-input指令的DOM事件进行对抗。 Using the $parsers pipeline avoids this problem. 使用$parsers管道可以避免此问题。

The DEMO on PLNKR . DENK在PLNKR上

From the Docs: 从文档中:

$parsers $解析器

Array of functions to execute, as a pipeline, whenever the control reads value from the DOM. 每当控件从DOM读取值时,作为管道执行的函数数组。 The functions are called in array order, each passing its return value through to the next. 这些函数按数组顺序调用,每个函数将其返回值传递给下一个。 The last return value is forwarded to the $validators collection. 最后的返回值将转发到$validators集合。

Parsers are used to sanitize / convert the $viewValue . 解析器用于清理/转换$viewValue

-- AngularJS ng-model Controller API Reference - $parsers -AngularJS ng模型控制器API参考-$ parsers

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM