angular之$apply嘗試

yzd 發(fā)布于2019-08-19 18:44 / 2152人閱讀

摘要：目前處于展開狀態(tài)，再次點擊按鈕，下拉隱藏。思路解析外層設置一個狀態(tài)值，通過添加控制下拉是否顯示。設想都是美好的，也通過測試這樣沒有問題。設置初始狀態(tài)為不顯示顯示關(guān)閉浮層點擊任一下拉選擇，隱藏。

angular開發(fā)過程中遇到的$apply問題

由于一直在項目上并嗎使用過angular進行開發(fā)，目前會遇到一些比較弱智的問題，所以每次遇到耗時較多的問題都總結(jié)一下。

$apply問題

接到一個類似于dropdown這樣的需求，點擊按鈕下拉選擇展示，而它的關(guān)閉有3中場景。

目前處于展開狀態(tài)，再次點擊按鈕，下拉隱藏。

點擊里面的任一條件，下拉隱藏。

點擊空白處，下拉隱藏。

相信這樣的使用場景一定不陌生，因為他經(jīng)常出現(xiàn)。

一開始的時候想象了一下jquery多么美好，實現(xiàn)起來多么簡單，其實angular也很容易。

思路解析：

外層設置一個狀態(tài)值，通過添加ngClass控制下拉是否顯示。設想都是美好的，也通過測試這樣沒有問題。

實現(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: "下拉選項1"},
    {title: "下拉選項2"},
    {title: "下拉選項3"},
    {title: "下拉選項4"},
    {title: "下拉選項5"}
];

4.點擊按鈕控制顯示隱藏，我只需要控制open狀態(tài)為true或false即可。

// 設置初始狀態(tài)為不顯示
vm.open = false;
// 顯示,關(guān)閉浮層
vm.toggle = function() {
    vm.open = !vm.open;
};

5.點擊任一下拉選擇，隱藏。

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

6.點擊空白處，隱藏。

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

看到這樣的代碼，你覺得有問題嗎？反正我當時覺得自己一定是對的，但調(diào)試結(jié)果就是不生效，下拉怎么都不會隱藏。
通過斷點調(diào)試，頁面輸出open的值，發(fā)現(xiàn)js中的open確實已經(jīng)發(fā)生改變，但是頁面的值確沒有改變，然后聯(lián)想到雙向數(shù)據(jù)綁定失效。

誰決定什么事件進入angular context,而哪些又不進入呢？$apply!

這里聲明一點ng-click不需要多帶帶去做處理是因為angular已經(jīng)做了，因此點擊帶有ng-click的元素時，事件就會被封裝到一個$apply調(diào)用。

所以上面的問題也顯而易見，是因為沒有調(diào)用$apply,事件沒有進入angular context, $digest循環(huán)永遠沒有執(zhí)行。
so將code修為：

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

這樣一測，立馬有用了。
$apply是$scope的一個函數(shù)，調(diào)用它會強制一次$digest循環(huán).
然后看到網(wǎng)上有人說有種更好用的辦法，嘗試了一下確實有效：

$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/...