angular之$apply尝试

yzd 发布于2019-08-19 18:44 / 2146人阅读

摘要：目前处于展开状态，再次点击按钮，下拉隐藏。思路解析外层设置一个状态值，通过添加控制下拉是否显示。设想都是美好的，也通过测试这样没有问题。设置初始状态为不显示显示关闭浮层点击任一下拉选择，隐藏。

angular开发过程中遇到的$apply问题

由于一直在项目上并吗使用过angular进行开发，目前会遇到一些比较弱智的问题，所以每次遇到耗时较多的问题都总结一下。

$apply问题

接到一个类似于dropdown这样的需求，点击按钮下拉选择展示，而它的关闭有3中场景。

目前处于展开状态，再次点击按钮，下拉隐藏。

点击里面的任一条件，下拉隐藏。

点击空白处，下拉隐藏。

相信这样的使用场景一定不陌生，因为他经常出现。

一开始的时候想象了一下jquery多么美好，实现起来多么简单，其实angular也很容易。

思路解析：

外层设置一个状态值，通过添加ngClass控制下拉是否显示。设想都是美好的，也通过测试这样没有问题。

实现过程：

1.html书写


    cilic me!
    
        
            {{item.title}}

2.css代码控制

.content .list{
    display: block;
}  
.content.open .list{
    display: block;
}

3.mock静态数据

vm.list = [
    {title: "下拉选项1"},
    {title: "下拉选项2"},
    {title: "下拉选项3"},
    {title: "下拉选项4"},
    {title: "下拉选项5"}
];

4.点击按钮控制显示隐藏，我只需要控制open状态为true或false即可。

// 设置初始状态为不显示
vm.open = false;
// 显示,关闭浮层
vm.toggle = function() {
    vm.open = !vm.open;
};

5.点击任一下拉选择，隐藏。

vm.itemClick = function() {
    vm.ticketOpen = false;
};

6.点击空白处，隐藏。

$document.off("click").on("click", function() {
    vm.open = false;
});

看到这样的代码，你觉得有问题吗？反正我当时觉得自己一定是对的，但调试结果就是不生效，下拉怎么都不会隐藏。
通过断点调试，页面输出open的值，发现js中的open确实已经发生改变，但是页面的值确没有改变，然后联想到双向数据绑定失效。

谁决定什么事件进入angular context,而哪些又不进入呢？$apply!

这里声明一点ng-click不需要多带带去做处理是因为angular已经做了，因此点击带有ng-click的元素时，事件就会被封装到一个$apply调用。

所以上面的问题也显而易见，是因为没有调用$apply,事件没有进入angular context, $digest循环永远没有执行。
so将code修为：

$document.off("click").on("click", function() {
    vm.open = false;
    $scope.$apply();
});

这样一测，立马有用了。
$apply是$scope的一个函数，调用它会强制一次$digest循环.
然后看到网上有人说有种更好用的办法，尝试了一下确实有效：

$document.off("click").on("click", function() {
    $scope.$apply(function () {
        vm.open = false;
    });
});

解释为：

What’s the difference?
The difference is that in the first version, we are updating the values outside the angular context so if that throws an error, Angular will never know.
Obviously in this tiny toy example it won’t make much difference,
but imagine that we have an alert box to show errors to our users and we have a 3rd party library that does a network call and it fails.
If we don’t wrap it inside an $apply, Angular will never know about the failure and the alert box won’t be there.

参考文章地址： http://angular-tips.com/blog/...

GPU云服务器云服务器云服务器怎么解决你正尝试从不属于 apply() applied apply

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79924.html

Angular1.x中ngModel的$render的详解

摘要：我们下面来看看的源码这是其中一个，在不同的指令下的代码都不太一样，但是其作用基本一致，但是从这里我们就可以看出的到底在干什么事了。这篇文章是我两年前在博客园写的,现在移植过来,不过Angular 1.x 在国内用的人已经不多了,希望能帮助到有需要的人在我开始着手 ngModel 的领域时候，有一个问题很令我纠结，那就是 $render 到底是做什么的呢？查了很多资料都只是简单的描述...

Euphoria 2019-08-22 14:50 评论0 收藏0
在 Angular 8 中，我们可以期待些什么

摘要：在理想的情况下，我们甚至可以立即将应用程序升级到。于是，在中，我们可以得到些什么正如我们所看到的，的新增特性除之外并不是很亮眼，尽管这些特性非常好用，但对于大多数应用程序来说并不重要。转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。本文由葡萄城翻译并发布 showImg(https://segmentfault.com/img/bVbrk...

LiveVideoStack 2019-08-23 16:55 评论0 收藏0
angular性能优化心得

摘要：本文针对的读者具备性能优化的相关知识雅虎条性能优化原则高性能网站建设指南等拥有实战经验。这种机制能减少浏览器次数，从而提高性能。仅会检查该和它的子，当你确定当前操作仅影响它们时，用可以稍微提升性能。搬运自: http://atian25.github.io/2014/05/09/angular-performace/ 不知不觉，在项目中用angular已经半年多了，踩了很多坑...

guqiu 2019-08-19 14:44 评论0 收藏0
总结的AngularJS1版本的一些面试问题

摘要：综上所述两者是出于不同的目的被创建的，解决的也是不同的问题。检测模型变化的过程称为循环。由指令注册的事件处理函数执行。该回调函数会更新插值表达式所在的属性。模块主要关系脚本加载问题。 AngularJS面试题 1.与jQuery的比较 jQuery js函数库封装简化dom操作使用jquery的思想是：我拥有一个DOM元素并且想让它去做某件事。也就是命令式编程思想。 angula...

defcon 2019-08-21 16:18 评论0 收藏0
AngularJS学习笔记(1) --- 执行过程

摘要：前言由于在博客系统的开发中和近期工作中的前端框架主要使用因此在这里记录学习和使用的过程中遇到的一些需要记录的点。执行过程弄清楚的执行过程是很重要的，这样你才能在正确的时机做正确的事。至此，的执行过程也就告一段落了。前言由于在博客系统的开发中和近期工作中的前端框架主要使用 AngularJS ,因此在这里记录学习和使用 AngularJS 的过程中遇到的一些需要记录的点。特别说明，本...

taohonghui 2019-08-20 14:06 评论0 收藏0