$http 得到不刷新的结果

Question

我正在尝试用 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 中未显示笑话值。我错过了什么吗？

Answer 1

$jokeService.joke 的值在 $scope.joke = $jokeService.joke; 的控制器中被复制一次。要绑定到不断变化的值，请设置 $scope.service = $jokeService 并将 HTML 中的绑定更改为 service.joke.

对于您的可视化，情况是这样的：

AngularJS 尝试创建控制器，但发现服务依赖项
AngularJS 创建并运行服务
AngularJS 创建并运行控制器（值在此处复制）
控制器的范围附加到 HTML 元素

Answer 2

您需要在控制器中解决工厂返回的承诺。我们还可以通过移动解析逻辑和更改注入来简化您的服务。观察以下变化...

.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 - 工作演示

$http 得到不刷新的结果

$http get not refreshing result

html

javascript

angularjs

angularjs-directive

angularjs-service