ng-model-options debounce不按预期工作模糊事件？

Question

我已经申请ng-model-options上input有如下配置

ng-model-options="{updateOn:'default blur',debounce:{default:1000,blur:0}}"

并且根据应用的配置,ng-model-options我期待事件的更新ng-model's值,ng-blur但尽管已0为blur事件设置了debounce值,但它不会返回新值.

*注意:只有当用户在default去抖动时间内聚焦时才会出现此问题,即1000

HTML:

<input type="text" ng-model="myname" ng-blur="onBlur(myname)" ng-model-options="{updateOn:'default blur',debounce:{default:1000,blur:0}}">
<input type="text" ng-model="output"/>

JS:

$scope.myname = "Yogesh";
$scope.output = "";
$scope.onBlur = function(a){
   $scope.output = a;
}

Plunker链接:https://embed.plnkr.co/XJMUUD/

为什么去抖不起作用？如果我做错了,请纠正我!

提前致谢 :)

我也给出了我的问题的答案!让我知道它的使用灵活性以及它如何有助于减少事件摘要周期.

Answer 1

ng-model-options如何帮助减少事件摘要周期？

是的, ng-model-options可以帮助您限制$digest周期数.如果你只使用ng-model而没有为它设置任何选项,那么你的$ digest循环将针对ng-model值的每次变化运行.如果$digest循环中包含大量要进行脏检查的数据,则用户将看到UI中的滞后,而(例如)在内部键入.Here是toddmotto博客引用的示例.

// app.js
angular
	.module('app', []);

function trackDigests($rootScope) {
    function link($scope, $element, $attrs) {
        var count = 0;
        function countDigests(newValue, oldValue) {
            count++;
            $element[0].innerHTML = '$digests: ' + count;
        }
        $rootScope.$watch(countDigests);
    }
    return {
        restrict: 'EA',
        link: link
    };
}

angular
	.module('app')
	.directive('trackDigests', trackDigests);

<script src="//code.angularjs.org/1.4.7/angular.min.js"></script>
<div ng-app="app">
    <div>
        <form name="myForm">
            <h3>Standard &lt;input&gt;</h3>
            <track-digests></track-digests>
            <input 
                   type="text" 
                   name="test" 
                   ng-model="test">
        </form>
    </div>
</div>

从标准输入中可以看出,我们$digest在输入字段中输入的每个字符都会触发循环.这可能会导致最终用户延迟大型应用程序.

现在我们将看到具有ng-model选项的输入的情况.

// app.js
angular
	.module('app', []);

function trackDigests($rootScope) {
    function link($scope, $element, $attrs) {
        var count = 0;
        function countDigests(newValue, oldValue) {
            count++;
            $element[0].innerHTML = '$digests: ' + count;
        }
        $rootScope.$watch(countDigests);
    }
    return {
        restrict: 'EA',
        link: link
    };
}

angular
	.module('app')
	.directive('trackDigests', trackDigests);

<script src="//code.angularjs.org/1.4.7/angular.min.js"></script>
<div ng-app="app">
    <div>
        <form name="myForm">
            <h3>ngModelOptions &lt;input&gt;</h3>
            <track-digests></track-digests>
            <input 
                   type="text" 
                   name="test" 
                   ng-model="test"
                   ng-model-options="{
                       updateOn: 'blur'
                   }">
        </form>
    </div>
</div>

在这里我们可以看到$digest只有当我们从输入中失去焦点时才会触发循环.所以,基本上ngModelOptions是让我们控制$digest周期的发生方式和时间.

让我们$digest通过引入去抖动来对循环进行更多控制,以便我们可以告知角度何时更新.

// app.js
angular
	.module('app', []);

function trackDigests($rootScope) {
    function link($scope, $element, $attrs) {
        var count = 0;
        function countDigests(newValue, oldValue) {
            count++;
            $element[0].innerHTML = '$digests: ' + count;
        }
        $rootScope.$watch(countDigests);
    }
    return {
        restrict: 'EA',
        link: link
    };
}

angular
	.module('app')
	.directive('trackDigests', trackDigests);

<script src="//code.angularjs.org/1.4.7/angular.min.js"></script>
<div ng-app="app">
    <div>
        <form name="myForm">
            <h3>ngModelOptions &lt;input&gt;</h3>
            <track-digests></track-digests>
            <input 
                   type="text" 
                   name="test" 
                   ng-model="test"
                   ng-model-options="{
                       updateOn: 'default blur',
                       debounce: {
                           'default': 250,
                           'blur': 0
                       }
                   }">
        </form>
    </div>
</div>

以上说明默认值将在事件停止后250ms更新,并且模糊将在用户离开输入时立即更新(如果这是我们想要的行为).

再次开始输入,然后停止并注意$digest计数严重低于初始演示.然后,您可以单击/标签以$digest立即呼叫另一个.

去抖的默认和变化有什么区别？

debounce对象属性的默认和更改只是事件.默认不是DOM事件,这只是ng-model-options api的一部分.假设您正在设置类似的ngModelOptions

ng-model-options="{
  updateOn: 'default'
}"

然后,输入字段的行为不会因默认行为而发生变化.在我们将它与debounce相结合之前,这种配置并没有用

ng-model-options="{
  updateOn: 'default',
  debounce: { 'default': 500 }
}"

这将使输入在500ms后更新.所以基本上这回答了默认值.您可以使用其他DOM事件(如change,blur,mouseover...等)进行去抖动.

更新:

当你使用时ng-model-options="{updateOn:'default blur',debounce:{default:1000,blur:0}}",ng-blur被ng-model的旧值触发,之后只有updateOn事件被触发.所以输出将包含ng-model的旧值,尽管myname将被更新.

工作示例:https://plnkr.co/edit/2JPHXvXd992JJ0s37YC9？p = preview

现在,当你使用时ng-model-options="{updateOn:'default change blur',debounce:{default:1000,blur:0,change:0}}",ng-blur被ng-model的新值触发,因为设置更改:0使updateOn事件在ng-blur之前触发.所以基本上输出是用ng-的新值更新的模型和myname.

工作示例:https://plnkr.co/edit/9wdA0he2YVcsPRLJ1Ant？p = preview