angular.js - Angular双向绑定失效了！

Question

先贴上代码：

controller:

.controller('FoldController', ['$scope', function ($scope){
    $scope.isFolded = true;   //  标志是否折叠的状态
}])

directive:

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

            // 只要点击其中的内容，让其折叠回去
            element.on('click',function () {  
                scope.isFolded = true;
                element.slideUp();
                console.log(scope);             
            });

            // 折叠的函数                
            function toggleFold(isFold) {

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

            // 监视是否折叠，即controller里定义的标志
            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">  
            //  主要是这里  点击后toggle折叠的标志

                <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>
                                          // 为了方便测试，我将折叠表示显示出来
        </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>  

效果：

折叠时

未折叠时

前提交代完毕，我的期望是：

在未折叠时通过点击折叠区域，让其折叠回去，同时改变scope.isFold折叠标志，让其恢复原状，

问题是：

其中会有一个bug，就是我修改了scope.isFold的值，并且验证了scope的值是被改变的，但是页面上依然是原值，即双向绑定失效，看下图

从图上的显示看，折叠区域已经被折叠，下面输出的scope.isFold也是正常的true，但是页面顶端上的值却是false，我验证过dom元素，是对了，验证过controller和directive里的scope.isFold的值，是对了，唯独这个页面就是对的，这个情况发生的也没有规律，挺郁闷的，谁来给看看。。。

Answer 1

이벤트 핸들러에 $scope.$apply를 추가하세요

Answer 2

으아악

js

으아악

Answer 3

해결책은 다음과 같습니다.

dom 요소를 조작하고 범위의 속성 값을 수정한 후,scope.$apply가 뷰를 업데이트합니다

으아악

Answer 4

실제로 많은 분들이 아직도 링크 기능에서 elemnet.on 이벤트 모니터링을 사용하고 계신다고 오해하고 계시는데요,
ngClick을 사용하고 링크에scope.click 함수를 작성해 보는 것은 어떨까요?

타사 jQuery 플러그인을 사용하지 않는 한