首页 / JAVASCRIPT / javascript-AngularJS-如何处理圆形手表？

javascript-AngularJS-如何处理圆形手表？

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-AngularJS-如何处理圆形手表？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2279字，纯文字阅读大概需要4分钟。

内容图文

假设我正在使用一个指令,该指令通过双向绑定以unix时间戳的形式给出日期,但是还提供了一个日历小部件来更改选择.

日历小部件可与日期对象一起使用,并且我无法更改输入数据格式,并且我不想重做日历以支持UNIX时间戳.同样,这只是一个例子,问题是与圆形观察员合作的一般方式.

范围如下所示：

scope.selectedUnixTimestamp; // this comes from the outside
scope.selectedDate;

scope.$watch('selectedUnixTimestamp', function(newV, oldV) {
    $scope.selectedDate = new Date(newV*1000);
});
scope.$watch('selectedDate', function(newV, oldV) {
    $scope.selectedUnixTimestamp = Math.floor(newV.getTime()/1000 + 0.000001);
});

我的问题是：为了避免额外调用$watch回调,我该怎么做？显然,如果我选择一个新日期,流程将如下：

>调用Watcher#2-修改选定的UnixTimestamp
>调用Watcher#1-修改selectedDate
>再次调用Watcher#2(新对象引用)-它修改了选定的UnixTimestamp

但是除了第一个电话外,我什么都不想要.我该如何实现？

显然,一种方法是执行以下操作：

scope.selectedUnixTimestamp; 
scope.selectedDate;

var surpressWatch1 = false;
var surpressWatch2 = false;

scope.$watch('selectedUnixTimestamp', function(newV, oldV) {
    if(surpressWatch1) { surpressWatch1 = false; return; }
    $scope.selectedDate = new Date(newV*1000);
    surpressWatch2 = true;
});
scope.$watch('selectedDate', function(newV, oldV) {
    if(surpressWatch2) { surpressWatch2 = false; return; }
    $scope.selectedUnixTimestamp = Math.floor(newV.getTime()/1000 + 0.000001);
    surpressWatch1 = true;
});

但是,维护这样的代码很快变成了地狱.

另一种方法是做类似的事情：

scope.selectedUnixTimestamp; 
scope.selectedDate;

scope.$watch('selectedUnixTimestamp', function(newV, oldV) {
    if(newV*1000 === scope.selectedDate.getTime()) { return; }
    $scope.selectedDate = new Date(newV*1000);
});
scope.$watch('selectedDate', function(newV, oldV) {
    if(scope.selectedUnixTimestamp*1000 === newV.getTime()) { return; }
    $scope.selectedUnixTimestamp = Math.floor(newV.getTime()/1000 + 0.000001);
});

但是,如果数据转换比* 1000更复杂,可能会非常昂贵

另一种方法是监视原始值而不是日期对象：

scope.$watch('selectedDate.getTime()', function(newV, oldV) {

但这仅适用于此特定示例,而不能解决一般问题

解决方法:

Angular框架基于以下假设构建：
在模型中,曾经存在某个事物的真实可信值,例如准备与REST服务同步.

请记住,您永远不会编写循环观察程序.
并且如果您有两种不同的方式来更改模型值,则可以编写需要ngModelController实例并提供正确的格式化程序和解析器功能的指令.

内容总结

以上是互联网集市为您收集整理的javascript-AngularJS-如何处理圆形手表？全部内容，希望文章能够帮你解决javascript-AngularJS-如何处理圆形手表？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/658816.html

来源：【匿名】