国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

angular.js - Angular雙向綁定失效了!
伊謝爾倫
伊謝爾倫 2017-05-15 16:52:42
0
4
1023

先貼上代碼:

controller:

.controller('FoldController', ['$scope', function ($scope){
    $scope.isFolded = true;   //  標(biāo)志是否折疊的狀態(tài)
}])

directive:

.directive('fold', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

            // 只要點(diǎn)擊其中的內(nèi)容,讓其折疊回去
            element.on('click',function () {  
                scope.isFolded = true;
                element.slideUp();
                console.log(scope);             
            });

            // 折疊的函數(shù)                
            function toggleFold(isFold) {

                isFold ? element.slideUp() : element.slideDown();
            }       

            // 監(jiān)視是否折疊,即controller里定義的標(biāo)志
            scope.$watch(attrs.fold, function (isFold) {
                toggleFold(isFold);
            });
        }
    }
})

html:

<nav class="navbar navbar-default" ng-controller="FoldController">
    <p class="container">
        <p class="navbar-header">
            <button type="button" class="navbar-toggle"
             ng-click="isFolded=!isFolded">  
            //  主要是這里  點(diǎn)擊后toggle折疊的標(biāo)志

                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a href="#/index" class="navbar-brand">Index {{isFolded}}</a>
                                          // 為了方便測(cè)試,我將折疊表示顯示出來(lái)
        </p>
                                           // 這里用directive控制
        <p class="navbar-collapse collapse" fold="isFolded">
            <ul class="navbar-nav nav">
                <li class="active"><a href="#/index">index</a></li>
                <li><a href="#/about">about</a></li>
                <li><a href="#/contact">contact</a></li>
                <li><a href="#/chatroom">chatroom</a></li>
            </ul>
        </p>

    </p>
</nav>  

效果:

折疊時(shí)

未折疊時(shí)

前提交代完畢,我的期望是:

在未折疊時(shí)通過(guò)點(diǎn)擊折疊區(qū)域,讓其折疊回去,同時(shí)改變scope.isFold折疊標(biāo)志,讓其恢復(fù)原狀,

問(wèn)題是:

其中會(huì)有一個(gè)bug,就是我修改了scope.isFold的值,并且驗(yàn)證了scope的值是被改變的,但是頁(yè)面上依然是原值,即雙向綁定失效,看下圖

從圖上的顯示看,折疊區(qū)域已經(jīng)被折疊,下面輸出的scope.isFold也是正常的true,但是頁(yè)面頂端上的值卻是false,我驗(yàn)證過(guò)dom元素,是對(duì)了,驗(yàn)證過(guò)controller和directive里的scope.isFold的值,是對(duì)了,唯獨(dú)這個(gè)頁(yè)面就是對(duì)的,這個(gè)情況發(fā)生的也沒(méi)有規(guī)律,挺郁悶的,誰(shuí)來(lái)給看看。。。

伊謝爾倫
伊謝爾倫

小伙看你根骨奇佳,潛力無(wú)限,來(lái)學(xué)PHP伐。

全部回復(fù)(4)
phpcn_u1582

在你的事件處理函數(shù)中 加入 $scope.$apply

洪濤

雷雷

js

雷雷
為情所困

解決方案是:

在操作完dom元素,修改scope上的屬性值后,scope.$apply更新視圖

element.on('click', function() {
    pe.isFolded = !scope.isFolded;          
    element.slideUp();
    scope.$apply();
})
黃舟

其實(shí)很多人有個(gè)誤區(qū), 就是還在link函數(shù)中使用 elemnet.on 這種事件監(jiān)聽(tīng),
為什么不用ngClick然后在link中寫(xiě)一個(gè)scope.click函數(shù)呢?

除非你用的第三方的jQuery插件

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板