先貼上代碼:
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伐。
解決方案是:
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插件