2014-11-01 90 views
1

我剛開始用角,並有一個簡單的問題:通知角變量已經改變

var data = JSON.parse('[{"name": "Joe","account": "12355845454","rent": "500"}]'); 

angular.module('ngAppRentManager', []). 
controller('RentCtrl', ['$scope', function ($scope) { 
    $scope.tenants = data; 
}]); 

setTimeout(function() { 
    data = JSON.parse('[{"name": "Sara","account": "54874","rent": "600"}]'); 
    console.log("Poke Angular!"); 
}, 2000); 

當我的變量data發生了變化。我如何讓Angular更新模型?

Fiddle

+1

見$超時服務。這可以確保你的角度知道你的異步操作。 – Subin 2014-11-01 12:49:49

+0

或調用$ scope.apply()來詢問角度來檢查數據,並更新綁定。 – Subin 2014-11-01 12:50:26

+0

@Subin $ scope在當前上下文中沒有定義,我該如何引用它?我沒有做任何異步btw,當用戶在文件輸入中加載csv文件時,我正在更改'data'。我應該採取不同的方式嗎? – Jonathan 2014-11-01 12:52:27

回答

3

廣告。適用()你這樣的代碼

var data = JSON.parse('[{"name": "Joe","account": "12355845454","rent": "500"}]'); 

angular.module('ngAppRentManager', []). 
controller('RentCtrl', ['$scope', function ($scope) { 
    $scope.tenants = data; 

    setTimeout(function() { 
    $scope.tenants = JSON.parse('[{"name": "Sara","account": "54874","rent": "600"}]'); 
    console.log("Poke Angular!"); 
    $scope.$apply(); 
}, 2000); 

}]); 

http://jsbin.com/tirebavaho/1/

+0

不會工作...... – andlrc 2014-11-01 12:48:13

+0

它確實 - 檢查jsbin示例 – 2014-11-01 12:55:25

+3

我在寫完評論後改變了整個答案。在它是'data = JSON.parse(...)'之前'您下次發佈時,請檢查您的代碼,然後再發布,而不是之後... – andlrc 2014-11-01 13:15:36

2

使用$timeout服務留內angular context

var data = JSON.parse('[{"name": "Joe","account": "12355845454","rent": "500"}]'); 

angular.module('ngAppRentManager', []). 
controller('RentCtrl', ['$scope', '$timeout', function ($scope, $timeout) { 
    $scope.tenants = data; 
}]); 

$timeout(function() { 
    data = JSON.parse('[{"name": "Sara","account": "54874","rent": "600"}]'); 
    console.log("Poke Angular!"); 
}, 2000); 
+0

[http://support.microsoft.com/kb/26689447/notify-angular-a-variable-has-changed/26689794?#comment41998544_26689794) – Jonathan 2014-11-02 18:13:22

0

我發現我的問題

var data = JSON.parse('[{"name": "Joe","account": "12355845454","rent": "500"}]'); 

angular.module('ngAppRentManager', []). 
controller('RentCtrl', ['$scope', '$timeout', function ($scope, $timeout) { 
    $scope.tenants = data; 
    $scope.getData = function (newData) { 
     $scope.tenants = newData; 
     $scope.$apply(); 
    }; 
}]); 

setTimeout(function() { 
    data = JSON.parse('[{"name": "Sara","account": "54874","rent": "600"}]'); 
    console.log("Poke Angular!"); 
    // Is this the best way to call Angular from outside scope? 
    angular.element($('#control')).scope().getData(data); 
}, 2000); 

工作的解決方案如果這可以通過直接調用控制器加以改進,請讓我知道。

Fiddle

+0

JimmyRare的回答是正確的。在使用角度時不需要使用#id。不需要使用DOM操作NOR處理元素時應該使用角度 – harishr 2014-11-02 18:03:49

+0

我在實際中並沒有'timeout'的用法我想在控制器之外的函數之後更新我的視圖解析了一個CSV文件。 – Jonathan 2014-11-02 18:06:58

+0

請勿在角度上下文中使用scope.apply,這會使您的方法附加到控制器作用域上,從角度來看不可用(因爲它將引發相位錯誤)。因此,理想情況下,scope.apply必須在源中調用,而不是在受影響的函數中調用。也就是說,你會在setTimeout中執行你的情況。此外2秒的超時會給你帶來什麼?如果你的過程需要更多的時間,甚至更少的時間讓用戶等待,該怎麼辦? – PSL 2014-11-02 18:12:24

0

您可以使用$scope.$watch

$scope.$watch("data", function (newVal, oldVal) { 
    //your update code 
    //newVal is your data's changed value 
});