国产成人精品亚洲777人妖,欧美日韩精品一区视频,最新亚洲国产,国产乱码精品一区二区亚洲

您的位置:首頁技術(shù)文章
文章詳情頁

angular.js - Angular雙向綁定失效了!

瀏覽:116日期:2024-10-12 08:28:43

問題描述

先貼上代碼:

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>

效果:

折疊時

angular.js - Angular雙向綁定失效了!

未折疊時

angular.js - Angular雙向綁定失效了!

前提交代完畢,我的期望是:

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

問題是:

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

angular.js - Angular雙向綁定失效了!

從圖上的顯示看,折疊區(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)文章:
主站蜘蛛池模板: 河曲县| 大冶市| 增城市| 光山县| 泗水县| 阿勒泰市| 临朐县| 台湾省| 天台县| 大同县| 昌黎县| 兴业县| 山阴县| 岱山县| 高州市| 仲巴县| 潞西市| 鄯善县| 运城市| 高青县| 伽师县| 新竹县| 肇庆市| 陆丰市| 海南省| 汾西县| 邢台市| 威信县| 包头市| 新竹市| 英山县| 堆龙德庆县| 铁岭县| 海南省| 都昌县| 平阳县| 罗定市| 沾益县| 交城县| 尉氏县| 大兴区|