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>

笑话中未显示笑话值。我错过了什么吗？

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得不到令人耳目一新的结果

2 个答案: