Tampal kod dahulu:
pengawal:
.controller('FoldController', ['$scope', function ($scope){
$scope.isFolded = true; // 标志是否折叠的状态
}])
arahan:
.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>
Kesan:
Apabila dilipat
Apabila dibuka
Serahan awal selesai, jangkaan saya ialah:
Apabila ia dibentangkan, klik pada kawasan yang dilipat untuk melipatnya semula dan tukar skop.isFold bendera lipat untuk memulihkannya kepada keadaan asalnya,
Soalannya ialah:
Akan ada pepijat, iaitu, saya mengubah suai nilai skop.isFold dan mengesahkan bahawa nilai skop telah ditukar, tetapi nilai asal masih pada halaman, iaitu pengikatan dua hala tidak sah . Lihat gambar di bawah
Dari paparan dalam gambar, kawasan lipatan telah dilipat Output skop.isFold di bawah juga benar, tetapi nilai di bahagian atas halaman adalah palsu . Saya telah mengesahkan pengawal itu betul dengan nilai skop.isFold dalam arahan Hanya halaman ini berlaku secara tidak menentu, yang agak menyedihkan. . .
Tambahkan $scope.$apply
pada pengendali acara andajs
Penyelesaiannya ialah:
Selepas mengendalikan elemen dom dan mengubah suai nilai atribut pada skop, skop.$apply mengemas kini paparan
Malah, ramai yang salah faham, iaitu masih menggunakan pemantauan acara elemnet.on dalam fungsi pautan,
Mengapa tidak menggunakan ngClick dan menulis fungsi scope.click dalam pautan?
Melainkan anda menggunakan pemalam jQuery pihak ketiga