$ 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不刷新结果

回答

相关问题