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

Paste the code first:

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>  

Effect:

When folded

When unfolded

Preliminary submission completed, my expectation is:

When it is unfolded, click on the folded area to fold it back, and change the scope.isFold folding flag to restore it to its original state,

The question is:

There will be a bug, that is, I modified the value of scope.isFold and verified that the value of scope was changed, but the original value is still on the page, that is, the two-way binding is invalid. See the picture below

From the display in the picture, the folding area has been folded. The scope.isFold output below is also normal true, but the value at the top of the page is false. I have verified the dom element and it is correct. I have verified the controller. It is correct with the value of scope.isFold in the directive. Only this page is correct. This situation happens erratically, which is quite depressing. Can someone check it out? . .