$ HTTP GET不刷新結果

我試圖做一些例子與angularJS：

HTML：

<html ng-app="myApp"> 
    <body ng-controller="JokesController"> 
     <h1>{{ joke }}<h1> 
    </body> 
</html>

腳本：

<script type="text/javascript"> 

    m.factory('$jokeService', function($http, $interval) { 

     var service = { 
      joke: "" 
     }; 

     service.randomize = function() { 
      $http.get("http://api.icndb.com/jokes/random") 
       .success(function(data) { 
        service.joke = data.value.joke; 
        console.log(service.joke) 
       }) 
       .error(function(data) { 
        console.log(data) 
       }); 
     } 

     $interval(function() { 
      service.randomize(); 
     }, 2000) 

     return service; 
    }); 

    m.controller('JokesController', function($scope, $jokeService) { 
     $scope.joke = $jokeService.joke; 
    }); 
</script>

笑話值未在HTML顯示。我錯過了什麼嗎？

來源

2015-10-06 Marco Prado

所有的人都重複同樣的答案，它是正確的。然而（這是可怕的做法）如果你有一些設計架構不會讓你修改你的服務，你沒有別的選擇，你可以將你的服務直接綁定到範圍，它會工作。 '$ scop.joke = $ jokeService'然後在你的html'{{joke.joke}}'中。不過，我強烈建議不要這樣做。 – ste2425

我更願意指出爲什麼給定的場景無法提供，而不是提出不同的場景，因爲它顯示了代碼中發生了什麼，以及爲什麼它不起作用。由於這個問題是關於一些例子的，我不認爲這會把它變成生產代碼！ –

我開始使用前端代碼。你能指點我正確的方式來做到這一點嗎？ –

您需要在控制器中解析工廠返回的承諾。我們也可以通過移動解析邏輯和更改注射來簡化您的服務。遵守以下變化...

.factory('$jokeService', function($http) { 
    function getJoke() { 
     return $http.get('http://api.icndb.com/jokes/random'); 
    } 

    return { 
     getJoke: getJoke 
    }; 
});

.controller('JokesController', function($scope, $jokeService, $interval) { 

    $interval(function() { 
     $jokeService.getJoke().then(function(response) { 
      $scope.joke = response.data.value.joke; 
     }); 
    }, 2000); 
});

Plunker Link - 工作演示

來源

2015-10-06 17:35:31 scniro

$jokeService.joke的值在控制器$scope.joke = $jokeService.joke;處被複制一次。要綁定到保持更改的值，請設置$scope.service = $jokeService並將HTML中的綁定更改爲service.joke。

對於可視化，這是發生了什麼：

AngularJS嘗試創建控制器，但發現該服務依賴
AngularJS創建並運行服務
AngularJS創建並運行控制器（該值在此複製）
控制器的作用域附加到HTML元素

來源

2015-10-06 17:31:46

是正確的，請記住，JavaScript對象是作爲參考而不是值傳遞的。您正在傳遞該值，因此該值正在被複制。 – jstuartmilne

$ HTTP GET不刷新結果

回答

相關問題