問題描述

先貼上代碼：

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 ng-controller='FoldController'> <p class='container'><p class='navbar-header'> <button type='button' 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='http://www.aoyou183.cn/wenda/14853.html#/index' class='navbar-brand'>Index {{isFolded}}</a> // 為了方便測試，我將折疊表示顯示出來</p> // 這里用directive控制<p fold='isFolded'> <ul class='navbar-nav nav'><li class='active'><a href='http://www.aoyou183.cn/wenda/14853.html#/index'>index</a></li><li><a href='http://www.aoyou183.cn/wenda/14853.html#/about'>about</a></li><li><a href='http://www.aoyou183.cn/wenda/14853.html#/contact'>contact</a></li><li><a href='http://www.aoyou183.cn/wenda/14853.html#/chatroom'>chatroom</a></li> </ul></p> </p></nav>

效果：

折疊時(shí)

未折疊時(shí)

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

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

問題是：

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

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

問題解答

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

<p fold ng-model='isFolded'> <ul class='navbar-nav nav'><li class='active'><a href='http://www.aoyou183.cn/wenda/14853.html#/index'>index</a></li><li><a href='http://www.aoyou183.cn/wenda/14853.html#/about'>about</a></li><li><a href='http://www.aoyou183.cn/wenda/14853.html#/contact'>contact</a></li><li><a href='http://www.aoyou183.cn/wenda/14853.html#/chatroom'>chatroom</a></li> </ul></p>

js

.directive(’fold’, function () { return {require: ’ngModel’,restrict: ’A’,link: function (scope, element, attrs) { // 只要點(diǎn)擊其中的內(nèi)容，讓其折疊回去 element.on(’click’,function () { scope.isFolded = true;element.slideUp();scope.$digest();console.log(scope); }); ..... scope.$watch(’isFolded’, function (isFold) {toggleFold(isFold); });回答3：

解決方案是：

element.on(’click’, function() { pe.isFolded = !scope.isFolded; element.slideUp(); scope.$apply();})回答4：

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

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