我的js代碼有什么問題？

Question

我試圖使用Angular將數據從JavaScript發送到html ...我有這段代碼

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)

Answer 1

您必須使用angularjs $ timeout而不是setTimeout 。 使用setTimeout不會通知angular發生了更改，但是使用$timeout可以通知。

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

Answer 2

問題是您正在使用setTimeout來導致角度不知道的$scope上的角度數據發生變化。

您需要閱讀angular的$digest循環 ，但是總之，您需要告訴angular一些事件已經發生。

對於超時，angular提供了一個為您執行此服務的服務，名為$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包裝器-還返回了一個promise，並且在測試時有一個方便的flush()裝飾器。

無論您是否習慣使用promise和編寫測試，都應該使用$timeout ，因為總有一天您會想要使用這些功能。