angular.js - Angular雙向綁定失效了!
問題描述
先貼上代碼:
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) { // 只要點擊其中的內(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'> // 主要是這里 點擊后toggle折疊的標(biāo)志<span class='icon-bar'></span><span class='icon-bar'></span><span class='icon-bar'></span> </button> <a href='http://www.intensediesel.com/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.intensediesel.com/wenda/14853.html#/index'>index</a></li><li><a href='http://www.intensediesel.com/wenda/14853.html#/about'>about</a></li><li><a href='http://www.intensediesel.com/wenda/14853.html#/contact'>contact</a></li><li><a href='http://www.intensediesel.com/wenda/14853.html#/chatroom'>chatroom</a></li> </ul></p> </p></nav>
效果:
折疊時
未折疊時
前提交代完畢,我的期望是:
在未折疊時通過點擊折疊區(qū)域,讓其折疊回去,同時改變scope.isFold折疊標(biāo)志,讓其恢復(fù)原狀,
問題是:
其中會有一個bug,就是我修改了scope.isFold的值,并且驗證了scope的值是被改變的,但是頁面上依然是原值,即雙向綁定失效,看下圖
從圖上的顯示看,折疊區(qū)域已經(jīng)被折疊,下面輸出的scope.isFold也是正常的true,但是頁面頂端上的值卻是false,我驗證過dom元素,是對了,驗證過controller和directive里的scope.isFold的值,是對了,唯獨這個頁面就是對的,這個情況發(fā)生的也沒有規(guī)律,挺郁悶的,誰來給看看。。。
問題解答
回答1:在你的事件處理函數(shù)中 加入 $scope.$apply
回答2:<p fold ng-model='isFolded'> <ul class='navbar-nav nav'><li class='active'><a href='http://www.intensediesel.com/wenda/14853.html#/index'>index</a></li><li><a href='http://www.intensediesel.com/wenda/14853.html#/about'>about</a></li><li><a href='http://www.intensediesel.com/wenda/14853.html#/contact'>contact</a></li><li><a href='http://www.intensediesel.com/wenda/14853.html#/chatroom'>chatroom</a></li> </ul></p>
js
.directive(’fold’, function () { return {require: ’ngModel’,restrict: ’A’,link: function (scope, element, attrs) { // 只要點擊其中的內(nèi)容,讓其折疊回去 element.on(’click’,function () { scope.isFolded = true;element.slideUp();scope.$digest();console.log(scope); }); ..... scope.$watch(’isFolded’, function (isFold) {toggleFold(isFold); });回答3:
解決方案是:
在操作完dom元素,修改scope上的屬性值后,scope.$apply更新視圖element.on(’click’, function() { pe.isFolded = !scope.isFolded; element.slideUp(); scope.$apply();})回答4:
其實很多人有個誤區(qū), 就是還在link函數(shù)中使用 elemnet.on 這種事件監(jiān)聽,為什么不用ngClick然后在link中寫一個scope.click函數(shù)呢?
除非你用的第三方的jQuery插件
相關(guān)文章:
1. javascript - 有什么比較好的網(wǎng)頁版shell前端組件?2. sql語句 - mysql中關(guān)聯(lián)表查詢問題3. javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標(biāo)?4. css - div外層有一圈白色5. javascript - [js]為什么畫布里不出現(xiàn)圖片呢?在線等6. javascript - vscode alt+shift+f 格式化js代碼,通不過eslint的代碼風(fēng)格檢查怎么辦。。。7. javascript - 如何將一個div始終固定在某個位置;無論屏幕和分辨率怎么變化;div位置始終不變8. html - vue項目中用到了elementUI問題9. javascript - iframe 為什么加載網(wǎng)頁的時候滾動條這樣顯示?10. javascript - 求解答:實例對象調(diào)用constructor,此時constructor內(nèi)的this的指向?
