- {{item.title}}
摘要:目前處于展開狀態(tài),再次點(diǎn)擊按鈕,下拉隱藏。思路解析外層設(shè)置一個(gè)狀態(tài)值,通過添加控制下拉是否顯示。設(shè)想都是美好的,也通過測(cè)試這樣沒有問題。設(shè)置初始狀態(tài)為不顯示顯示關(guān)閉浮層點(diǎn)擊任一下拉選擇,隱藏。
angular開發(fā)過程中遇到的$apply問題
由于一直在項(xiàng)目上并嗎使用過angular進(jìn)行開發(fā),目前會(huì)遇到一些比較弱智的問題,所以每次遇到耗時(shí)較多的問題都總結(jié)一下。
$apply問題接到一個(gè)類似于dropdown這樣的需求,點(diǎn)擊按鈕下拉選擇展示,而它的關(guān)閉有3中場(chǎng)景。
目前處于展開狀態(tài),再次點(diǎn)擊按鈕,下拉隱藏。
點(diǎn)擊里面的任一條件,下拉隱藏。
點(diǎn)擊空白處,下拉隱藏。
相信這樣的使用場(chǎng)景一定不陌生,因?yàn)樗?jīng)常出現(xiàn)。
一開始的時(shí)候想象了一下jquery多么美好,實(shí)現(xiàn)起來多么簡(jiǎn)單,其實(shí)angular也很容易。思路解析:
外層設(shè)置一個(gè)狀態(tài)值,通過添加ngClass控制下拉是否顯示。設(shè)想都是美好的,也通過測(cè)試這樣沒有問題。
實(shí)現(xiàn)過程:
1.html書寫
cilic me!
- {{item.title}}
2.css代碼控制
.content .list{ display: block; } .content.open .list{ display: block; }
3.mock靜態(tài)數(shù)據(jù)
vm.list = [ {title: "下拉選項(xiàng)1"}, {title: "下拉選項(xiàng)2"}, {title: "下拉選項(xiàng)3"}, {title: "下拉選項(xiàng)4"}, {title: "下拉選項(xiàng)5"} ];
4.點(diǎn)擊按鈕控制顯示隱藏,我只需要控制open狀態(tài)為true或false即可。
// 設(shè)置初始狀態(tài)為不顯示 vm.open = false; // 顯示,關(guān)閉浮層 vm.toggle = function() { vm.open = !vm.open; };
5.點(diǎn)擊任一下拉選擇,隱藏。
vm.itemClick = function() { vm.ticketOpen = false; };
6.點(diǎn)擊空白處,隱藏。
$document.off("click").on("click", function() { vm.open = false; });
看到這樣的代碼,你覺得有問題嗎?反正我當(dāng)時(shí)覺得自己一定是對(duì)的,但調(diào)試結(jié)果就是不生效,下拉怎么都不會(huì)隱藏。
通過斷點(diǎn)調(diào)試,頁(yè)面輸出open的值,發(fā)現(xiàn)js中的open確實(shí)已經(jīng)發(fā)生改變,但是頁(yè)面的值確沒有改變,然后聯(lián)想到雙向數(shù)據(jù)綁定失效。
誰決定什么事件進(jìn)入angular context,而哪些又不進(jìn)入呢?$apply!
這里聲明一點(diǎn)ng-click不需要多帶帶去做處理是因?yàn)閍ngular已經(jīng)做了,因此點(diǎn)擊帶有ng-click的元素時(shí),事件就會(huì)被封裝到一個(gè)$apply調(diào)用。
所以上面的問題也顯而易見,是因?yàn)闆]有調(diào)用$apply,事件沒有進(jìn)入angular context, $digest循環(huán)永遠(yuǎn)沒有執(zhí)行。
so將code修為:
$document.off("click").on("click", function() { vm.open = false; $scope.$apply(); });
這樣一測(cè),立馬有用了。
$apply是$scope的一個(gè)函數(shù),調(diào)用它會(huì)強(qiáng)制一次$digest循環(huán).
然后看到網(wǎng)上有人說有種更好用的辦法,嘗試了一下確實(shí)有效:
$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/...
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/79924.html
摘要:我們下面來看看的源碼這是其中一個(gè),在不同的指令下的代碼都不太一樣,但是其作用基本一致,但是從這里我們就可以看出的到底在干什么事了。 這篇文章是我兩年前在博客園寫的,現(xiàn)在移植過來,不過Angular 1.x 在國(guó)內(nèi)用的人已經(jīng)不多了,希望能幫助到有需要的人 在我開始著手 ngModel 的領(lǐng)域時(shí)候,有一個(gè)問題很令我糾結(jié),那就是 $render 到底是做什么的呢?查了很多資料都只是簡(jiǎn)單的描述...
摘要:在理想的情況下,我們甚至可以立即將應(yīng)用程序升級(jí)到。于是,在中,我們可以得到些什么正如我們所看到的,的新增特性除之外并不是很亮眼,盡管這些特性非常好用,但對(duì)于大多數(shù)應(yīng)用程序來說并不重要。 轉(zhuǎn)載請(qǐng)注明出處:葡萄城官網(wǎng),葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務(wù),賦能開發(fā)者。 本文由葡萄城翻譯并發(fā)布 showImg(https://segmentfault.com/img/bVbrk...
摘要:本文針對(duì)的讀者具備性能優(yōu)化的相關(guān)知識(shí)雅虎條性能優(yōu)化原則高性能網(wǎng)站建設(shè)指南等擁有實(shí)戰(zhàn)經(jīng)驗(yàn)。這種機(jī)制能減少瀏覽器次數(shù),從而提高性能。僅會(huì)檢查該和它的子,當(dāng)你確定當(dāng)前操作僅影響它們時(shí),用可以稍微提升性能。 搬運(yùn)自: http://atian25.github.io/2014/05/09/angular-performace/ 不知不覺,在項(xiàng)目中用angular已經(jīng)半年多了,踩了很多坑...
摘要:綜上所述兩者是出于不同的目的被創(chuàng)建的,解決的也是不同的問題。檢測(cè)模型變化的過程稱為循環(huán)。由指令注冊(cè)的事件處理函數(shù)執(zhí)行。該回調(diào)函數(shù)會(huì)更新插值表達(dá)式所在的屬性。模塊主要關(guān)系腳本加載問題。 AngularJS面試題 1.與jQuery的比較 jQuery js函數(shù)庫(kù) 封裝簡(jiǎn)化dom操作 使用jquery的思想是:我擁有一個(gè)DOM元素并且想讓它去做某件事。也就是命令式編程思想。 angula...
摘要:前言由于在博客系統(tǒng)的開發(fā)中和近期工作中的前端框架主要使用因此在這里記錄學(xué)習(xí)和使用的過程中遇到的一些需要記錄的點(diǎn)。執(zhí)行過程弄清楚的執(zhí)行過程是很重要的,這樣你才能在正確的時(shí)機(jī)做正確的事。至此,的執(zhí)行過程也就告一段落了。 前言 由于在博客系統(tǒng)的開發(fā)中和近期工作中的前端框架主要使用 AngularJS ,因此在這里記錄學(xué)習(xí)和使用 AngularJS 的過程中遇到的一些需要記錄的點(diǎn)。特別說明,本...
閱讀 1344·2023-04-26 00:35
閱讀 2716·2023-04-25 18:32
閱讀 3344·2021-11-24 11:14
閱讀 770·2021-11-22 15:24
閱讀 1418·2021-11-18 10:07
閱讀 6467·2021-09-22 10:57
閱讀 2774·2021-09-07 09:58
閱讀 3565·2019-08-30 15:54