避免角应用超时 [英] Avoiding timeouts in Angular applications

问题描述

我有，我是能够解决的，使用超时的问题。这感觉就像一个非常不好的做法，可能导致难以维护的混乱，我要寻找一个更好的办法来解决这个问题。

任何想法？

问题的希望不言自明的jsfiddle

 ＆LT; D​​IV NG-应用=测试NG-控制器=CTRL＆GT;
＆LT;表格名称=形式＆GT;
    ＆LT;输入自定义验证类型=文本NG模型=模式NAME =文本/＆GT;
它不应该允许发送'失败'
＆LT; /表及GT;
＆LT;按钮NG点击=fillAndSend（）＆GT;装满失败，并发送＆LT; /按钮＆GT;
＆LT;按钮NG点击=派（）＆GT;发送和LT; /按钮＆GT;
 ＆LT; H1＆GT;成功：{{}成功}＆LT; / H1＆GT;
 

  angular.module（测试，[]）;
angular.module（测试）指令（customValidation'，函数（）{
    使用严格的;
    返回{
        要求：'？ngModel'，
        链接：功能（范围，元素，ATTRS，ngModelCtrl）{
            范围。$腕表（attrs.ngModel，功能（价值）{
                如果（价值=='失败'）{
                    ngModelCtrl $ setValidity（'customValidation'，虚假）。
                }其他{
                    ngModelCtrl $ setValidity（'customValidation'，真）。
                }
            }）;
        }
    };
}）;angular.module（测试）。控制器（Ctrl键，功能（$范围，$超时）{
    $ scope.success = FALSE;
    $ scope.model;
    $ scope.fillAndSend =功能（）{
        $ scope.model ='失败';
        $ scope.send（）;
        / *使用超时工作
        $超时（函数（）{
            $ scope.send（）;
        }，0）;
        * /
    }    $ scope.send =功能（）{
        如果（$ scope.form $有效）{
            $ scope.success = TRUE;
        }其他{
            $ scope.success = FALSE;
        }
    }
}）;
 

解决方案

我相信这是因为角$消化周期正在发生的事情只是一次在这里。使用$超时，迫使你做成第二消化周期，这就是为什么它与$超时工作什么的第二部分。你不能只是叫 $范围。$适用（），因为你已经在消化周期。在这种情况下，使用超时是这样做，因为你需要的角度认识到模型中修改，然后调用发送函数的正确的事情。

另一种选择是设置一个标志在发送同时也是需要被调用，因为你改变模型的控制器。然后在你的指令，你看模型，你可以检查，看看是否需要调用发送

I have a problem that I was able to solve, using a timeout. This feels like a very bad practice that could lead to an unmaintainable mess, and I am looking for a better way to solve this problem.

Any ideas?

A hopefully self-explanatory JSFiddle of the problem

<div ng-app="test" ng-controller="Ctrl">
<form name="form">
    <input custom-validation type="text" ng-model="model" name="text" /> 
it should not allowed to send the word 'fail'
</form>
<button ng-click="fillAndSend()">Fill with 'fail' and send</button>
<button ng-click="send()">Send</button>
 <h1>Success: {{success}}</h1>

angular.module('test', []);
angular.module('test').directive('customValidation', function () {
    'use strict';
    return {
        require: '?ngModel',
        link: function (scope, element, attrs, ngModelCtrl) {
            scope.$watch(attrs.ngModel, function (value) {
                if (value == 'fail') {
                    ngModelCtrl.$setValidity('customValidation', false);
                } else {
                    ngModelCtrl.$setValidity('customValidation', true);
                }
            });
        }
    };
});

angular.module('test').controller('Ctrl', function ($scope, $timeout) {
    $scope.success = false;
    $scope.model;
    $scope.fillAndSend = function() {
        $scope.model = 'fail';
        $scope.send();
        /* using a timeout works
        $timeout(function(){
            $scope.send();    
        },0);
        */
    }

    $scope.send = function () {
        if ($scope.form.$valid) {
            $scope.success = true;
        } else {
            $scope.success = false;
        }
    }
});

解决方案

I believe this is because the angular $digest cycle is happening just once here. Using the $timeout, forces the second part of what you do into a second digest cycle, which is why it works with the $timeout. You can't just call $scope.$apply() because you are already in a digest cycle. In this case, using the timeout is the correct thing to do because you need angular to realize the model changed, and THEN call the send function.

The other option is to set a flag in the controller that send is needing to be called since you are changing the model. And then in your directive where you watch the model you could check to see if you need to call send

这篇关于避免角应用超时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！