[英]$http.get error in angular and node
My problem is $http.get
instruction --> Without $http.get
in the main page I get "random 46"
(test ok) but if I insert $http.get
I get "random {{ number }}"
.我的问题是$http.get
指令 --> 在主页上没有$http.get
我得到"random 46"
(test ok) 但是如果我插入$http.get
我得到"random {{ number }}"
。
How can I fix this?我该如何解决这个问题?
-server.js
-public
-core.js
-index.html
server.js (node backend) server.js(节点后端)
//restful api
app.get('/api/random', function(req, res) {
res.json({
"text" : "4"
});
});
//app
app.get('*', function(req, res) {
res.sendFile(__dirname + '/public/index.html');
});
core.js (angular frontend) core.js(角度前端)
angular.module("myModule", [])
.controller('myController', function($scope) {
$scope.number = 46;
$http.get('/api/random')
.then(function successCallback(res) {
$scope.number = res.data;
console.log('success');
}, function errorCallback() {
console.log('Error');
});
})
index.html索引.html
<html ng-app="myModule">
<head>
<!-- META -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"><!-- Optimize mobile viewport -->
<title>Random number from sa-mp</title>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"><!-- load bootstrap -->
<style>
html { overflow-y:scroll; }
body { padding-top:50px; }
#todo-list { margin-bottom:30px; }
</style>
<!-- SPELLS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script><!-- load angular -->
<script src="core.js"></script>
</head>
<!-- SET THE CONTROLLER AND GET ALL TODOS -->
<body ng-controller="myController">
<div class="container">
<!-- HEADER AND TODO COUNT -->
<div class="jumbotron text-center">
<h1>random <span class="label label-info">{{ number }}</span></h1>
</div>
</div>
</body>
</html>
EDIT: I tried编辑:我试过了
res.data
$scope.$apply();
and和
res.data.text
$scope.$apply();
and和
res.text
$scope.$apply();
but it didn't work.但它没有用。
EDIT 2: RESOLVED编辑 2:已解决
I replaced this我换了这个
.controller('myController', function($scope) {
with与
.controller('myController', function($scope, $http) {
and used this to set data并用它来设置数据
$scope.number = res.data.text;
Try to use $scope.$apply() at the last line of your callback.尝试在回调的最后一行使用 $scope.$apply() 。
like:像:
$http.get('/api/random')
.then(function successCallback(res) {
$scope.number = res.data.text;
$scope.$apply();
console.log('success');
}, function errorCallback() {
console.log('Error');
});
If it works.如果它有效。 You can know more about that in this article: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html您可以在本文中了解更多相关信息: http : //jimhoskins.com/2012/12/17/angularjs-and-apply.html
Also, you should get res.data.text
to have the right value on your html.此外,您应该让res.data.text
在您的 html 上具有正确的值。 like: $scope.number = res.data.text
;像: $scope.number = res.data.text
;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.