angular之$apply尝试

大佬教程收集整理的这篇文章主要介绍了angular之$apply尝试，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

$apply问题

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

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

2. 点击里面的任一条件，下拉隐藏。@H_403_3@

3. 点击空白处，下拉隐藏。@H_403_3@

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

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

思路解析：@H_403_3@

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

实现过程：@H_403_3@

1.html书写@H_403_3@

<div class="content" ng-class="{'open': vm.open}">
    <span class="show" ng-click="vm.toggle()">cilic me!</span>
    <div class="list">
        <ul>
            <li class="item" ng-repeat="item in list" ng-click="vm.itemClick();">{{item.title}}</li>
        </ul>
    </div>
</div>

2.css代码控制@H_403_3@

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

3.mock静态数据@H_403_3@

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

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

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

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

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

6.点击空白处，隐藏。@H_403_3@

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

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

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

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

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

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

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

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

解释为：@H_403_3@

大佬总结

以上是大佬教程为你收集整理的angular之$apply尝试全部内容，希望文章能够帮你解决angular之$apply尝试所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。