ng-model-options debounce无法按预期处理模糊事件？

时间：2017-07-11 18:23:23

标签： javascript angularjs angularjs-ng-model angularjs-events

我已在ng-model-options上应用了input以及以下配置

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

根据ng-model-options的应用配置，我期待ng-model's事件的更新ng-blur值，但尽管已设置0，但它不会返回新值}模糊事件的去抖动值。

*注意：仅当用户在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/

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

提前致谢：）

我也回答了我的问题！让我知道它的使用灵活性以及它如何有助于减少事件摘要周期。

3 个答案:

答案 0 :(得分：5)

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 objects属性的默认和更改只是事件。默认不是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-model的新值以及myname。

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

答案 1 :(得分：1)

这是因为当您设置debounce时，会在给定时间后触发摘要循环。触发摘要循环后，它会检查是否已更改尚未在应用程序中同步的值。

在您的情况下，输入值将在1000ms或1s后与模型变量myname同步，但在移除焦点时立即更新。您使用之前的onBlur(myname)值调用方法myname，因为在调用函数时，它仍然具有传递给它的参数的先前值（它无法更新值myname并同时调用该函数）之后，摘要循环更新myname。 您可以通过在输入旁边放置{{myname}}来检查模型是否立即更新。

ng-blur 
   -> call onBlur(myname)
      -> here myname is with old value still
      -> trigger digest loop (here is where the new value is assigned to myname) 
         -> update model & view
  

{updateOn：'event'}指定在特定事件发生时应该发生绑定。

要在元素失去焦点（onblur）之前更新模型，你必须使用updateOn: change并将其时间设置为0，这就是每个更改角度的方式将立即将新值绑定到函数参数。

答案 2 :(得分：1)

After some research we came across this configuration

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

Which works fine! as expected on ng-blur event it returns updated value.

相关问题
最新问题