angularjs在js程式碼中改變了model的值，但是頁面上沒有變化

阿新 • • 發佈：2019-01-17

1.場景重現

在controller中我們先預設給定model的值，然後呼叫了一個外部函式改變這個model的值，頁面上沒有變化，還是顯示預設值。

2.原因分析

AngularJS只會關心在AngularJS的執行上下文中的發生的資料模型(model)的變化(比如，改變資料的程式碼在$apply()裡面)。AngularJS內建的指令也會自動觸發$digest迴圈所以任何資料模型(model)的改變都會反映到檢視中。但是，如果我們更改一個不在AngularJS執行上下文中的資料模型(model)，就需要人為的呼叫$apply()來提醒AngularJS資料發生變化了。就像是要告訴AngularJS，我們改變了一些資料，他應該啟用監聽器以便於讓我們所做的改變能夠反映出來。例如，當使用Javascript的set

Timeout()函式來更新一個數據模型的時候，AngularJS就沒辦法知道你改變了資料模型。這種情況下，呼叫$apply()來觸發$digest迴圈就是你的責任了。類似的，如果你寫了一個指令，這個指令是設定了一個DOM事件監聽器，更改資料模型的程式碼在事件處理函式裡，那麼，也需要呼叫$apply()來保證更改能夠反映出來。

3.案例重現

<body ng-app="myApp">
    <div ng-controller="MessageController">
        Delayed Message: {{message}}
    </div>  
</body>
/* 沒有$apply()會發生什麼 */
angular.module('myApp', []).controller('MessageController', function ( $scope ) {

    $scope.getMessage = function () {
        setTimeout(function () {
            $scope.message = 'Fetched after 3 seconds';
            console.log('message:'+$scope.message);
        }, 2000);
    };

    $scope.getMessage();
});

通過執行這個例子，我們會發現，在兩秒之後，函式開始執行，並且更新資料模型。但是，檢視卻沒有更新。原因我們也應該猜到了，我們忘了呼叫$apply()。

因此，我們需要像下面這樣來寫我們的getMessage()函式。

angular.module('myApp', []).controller('MessageController', function ( $scope ) {
    $scope.getMessage = function () {
        setTimeout(function () {
            $scope.$apply(function () {
                //wrapped this within $apply
                $scope.message = 'Fetched after 3 seconds';
                console.log('message:' + $scope.message);
            });
        }, 2000);
    };

    $scope.getMessage();
});

執行更新後的例子，兩秒之後，我們就能夠看到檢視更新了。我們所做的唯一的改變就是將程式碼放進了$scope.$apply()中。這樣，就能自動的去呼叫$rootScope.$digest()，然後，監聽器就會啟動，檢視就會更新了。

angularjs在js程式碼中改變了model的值，但是頁面上沒有變化

angularjs在js程式碼中改變了model的值，但是頁面上沒有變化

angularjs在程式碼中改變了 model 的值，view 卻沒有更新

上兩篇文件解釋了這段程式碼中的兩個疑問，order_by('-pub_date')[:5]和[q.question_text for q in latest_question_list]

IOS XIB中設定了約束後無法在程式碼中改變檢視的frame

從model中取到的值，兩個值進行加減乘除運算

try中return某值，而finally中修改了這個值

王堅：「資料」改變了商業模式，運算能力決定企業的競爭力

從一組集合中獲取，分多次取集合中的每段數據中的最大值，重組成一個新的集合。

最近項目中遇到了一個場景，其實很常見，就是定時獲取接口刷新數據。那麽問題來了，假設我設置的定時時間為1s，而數據接口返回大於1s，應該用同步阻塞還是異步？

棧表中獲取最小值，時間複雜度為O(1)

leetcode671+二叉樹中第二小的值，先搜尋，然後儲存到set中。

求任意一個區間中的最大值，最小值 - 單調棧

(vue.js)vue中引用了別的元件，如何使this指向Vue物件

angularjs ng-if 中的ng-model 值作用域問題

定義一個數組，陣列初始長度由控制檯獲取。隨後手動給陣列中每個元素賦值，陣列滿後將陣列長度擴充二倍並輸出，清空陣列中所有元素且值繼承陣列長度，並重新進行手動新增元素，無限死迴圈直至輸出-0後結束程式。

spring 在Java中定義了變數ischeck，訪問時jsp報錯

ExtJs 中Grid根據列表中某列的值，修改整行資料的背景色 ExtJS版本為2.3

xcode 編譯器是如何發現程式碼中出現了”迴圈引用”的

VS Code編寫C語言，程式碼除錯之後，能輸入值，但按回車之後閃退

js篇-判斷陣列物件中是否含有某個值，並返回該條資料

angularjs在js程式碼中改變了model的值，但是頁面上沒有變化

相關推薦