2015-01-08 181 views
0

我試圖從JavaScript發送數據與角到HTML ... 我有這樣的代碼我的js代碼有什麼問題?

phonecatControllers.controller('start', ['$scope', function($scope){ 
    $scope.lloadd=true; 
    console.log('data - '+$scope.lloadd); 

    function second_passed() { 
     $scope.lloadd=false; 
     console.log('data - '+$scope.lloadd); 
     alert('sdasd'); 
    } 
    setTimeout(second_passed, 3000); 
}]); 

而這個HTML代碼

<div ng-show="lloadd"> 
12312312 
</div> 

當我開始應用DIV可見......但3秒後,我看到的只是警告... 這是我的日誌

01-08 16:34:25.608: I/chromium(22042): [INFO:CONSOLE(179)] "data - true", source: file:///android_asset/www/js/controllers.js (179) 

01-08 16:34:28.613: I/chromium(22042): [INFO:CONSOLE(182)] "data - false", source: file:///android_asset/www/js/controllers.js (182) 

回答

1

問題是您正在使用setTimeout導致角度不知道的$scope上的角度數據更改。

你需要閱讀有關角的$digest cycle,但總之,你需要告訴角一些事件已經發生。

對於超時,角度提供服務,這是否對你來說,適當命名的$timeout,所以這是非常簡單的:

phonecatControllers.controller('start', function($scope, $timeout){ 
$scope.lloadd=true; 
console.log('data - '+$scope.lloadd); 
function second_passed() { 
    $scope.lloadd=false; 
    console.log('data - '+$scope.lloadd); 
    alert('sdasd'); 
} 
$timeout(second_passed, 3000); 
}); 

當然一定要加$timeout到參數控制器的功能,以確保它被注射。

注意,您可以使用$scope.$apply()觸發摘要您second_passed函數中實現相同的結果:

function second_passed() { 
    $scope.$apply(function() { 
    $scope.lloadd=false; 
    }); 
    console.log('data - '+$scope.lloadd); 
    alert('sdasd'); 
} 

但是,這不是明智的有幾個原因:

  1. 這是更多的代碼!
  2. 如果已經有另一個摘要了,使用$scope.$apply()手動觸發摘要會導致問題,所以通常最好避免它。
  3. $timeout增加了不止一個$scope.$apply包裝 - 它也返回一個承諾,並有一個方便的flush()修飾器,當你測試。

無論你是在使用的承諾和編寫測試與否的習慣,你應該使用$timeout,因爲有一天你會使用這些功能。

+0

我刪除了我的答案,這個是最準確的 –

3

您必須使用angularjs $timeout instea d的setTimeout。與setTimeout角沒有得到通知某些更改,但與$timeout它。

但是,您也可以在您的second_passed()中使用$scope.$apply(),但我不建議這樣做。

+0

是不是一個範圍對象正在通過超時函數已經更新已經告訴角的東西已經改變?如何使用角度超時增加更多的價值? – Shouvik

+0

@Shouvik http://stackoverflow.com/questions/23070822/angular-scope-apply-vs-timeout-as-a-safe-apply這可能是你的問題的答案,即使這個問題是不完全一樣的,你可能會看到發生了什麼。 – ewooycom

+0

@Shouvik記得angular是一個JavaScript框架,而不是魔術。更改'$ scope'上的字段不會自動觸發任何事情。爲了知道事情已經改變,代碼必須運行以檢查它與之前的值。該代碼被稱爲「摘要循環」,其中「$超時」觸發。如果摘要不必手動觸發,那就意味着它運行在一個永無止境的循環中,這將使用大量的資源。 –