我可以控制http调用的结果但是当我绑定它以便我可以在html页面上查看时我无法执行此操作。有人可以帮我弄这个吗？我发布了控制器代码和下面的html。
控制器代码
//module
var weatherApp = angular.module('weatherApp',['ngRoute' , 'ngResource']);
//Routes
//http://api.openweathermap.org/data/2.5/forecast/daily?APPID=metric
weatherApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl:'pages/home.htm',
controller:'homeController'
})
.when('/forecast', {
templateUrl:'pages/forecast.htm',
controller:'forecastController'
});
});
//services
weatherApp.service('cityService' ,function() {
this.city ="San Jose, CA";
});
//controllers
weatherApp.controller('homeController' ,['$scope', 'cityService', function($scope , cityService) {
$scope.city = cityService.city;
$scope.$watch('city' , function () {
cityService.city = $scope.city;
});
}]);
$scope.city = cityService.city;
console.log($scope.city);
$http({
url: "http://api.openweathermap.org/data/2.5/forecast/daily?APPID==metric",
method: "GET",
params: {q: $scope.city, cnt:2}
}).then(function(response){
$scope.weatherResults = response.data;
console.log($scope.weatherResults);
});
}]);
Index.htm的HTML代码
<!DOCTYPE html>
<html lang="en" ng-app="weatherApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/navbar.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-resource.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand" href="#">Accurate Weather</a>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- NAVBAR ENDS-->
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
Forecast.html代码
Forecast for {{city}} <!-- THIS WORKS -->
{{ weatherResult.cnt }} <!-- THIS DOES NOT WORK -->
home.htm的代码（一切工作都很精致，只是为了保持清晰而发布）
<div class = "row">
<div class = "col-md-6 col-md-offset-3">
<h4>Forecast by city</h4>
<div class="form-group">
<input type="text" ng-model="city" class="form-control" />
</div>
<a href="/weatherApp/index.htm#!/forecast" class="btn btn-primary">Get forecast </a>
</div>
</div>
答案 0 :(得分：0)
也许尝试将$scope.weatherResult初始化为控制器中的空对象，以便AngularJS可以正确观察它。
答案 1 :(得分：0)
只需将此分配放在$scope.apply内即可通知角引擎数据异步更改，以便正确处理
$scope.$apply(function () {
$scope.weatherResult = response.data; //IF I LOG THIS IT WORKS
});
还可以添加检查gigest循环现在不在进行中
if(!$scope.$$phase) {
//$digest or $apply
}
答案 2 :(得分：0)
Angular的内置双向数据绑定对http响应无效，这是一个已知问题。使用_this手动启动双向数据绑定，从而启动摘要周期。
/* Simple JavaScript Inheritance
* By John Resig http://ejohn.org/
* MIT Licensed.
*/
// Inspired by base2 and Prototype
(function(){
var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
// The base Class implementation (does nothing)
this.Class = function(){};
function convertArgumentsToArray( args ) {
return Array.prototype.slice.apply( args );
}
// Create a new Class that inherits from this class
Class.extend = function(prop) {
var _super = this.prototype;
// Instantiate a base class (but only create the instance,
// don't run the init constructor)
initializing = true;
var prototype = new this();
initializing = false;
// Copy the properties over onto the new prototype
for (var name in prop) {
// Check if we're overwriting an existing function
prototype[name] = typeof prop[name] == "function" &&
typeof _super[name] == "function" && fnTest.test(prop[name]) ?
(function(name, fn){
return function() {
var tmp = this._super;
// Add a new ._super() method that is the same method
// but on the super-class
this._super = _super[name];
// The method only need to be bound temporarily, so we
// remove it when we're done executing
var ret = fn.apply(this, [this].concat( convertArgumentsToArray( arguments ) ));
this._super = tmp;
return ret;
};
})(name, prop[name]) :
(function(fn) {
return function() {
var ret = fn.apply(this, [this].concat( convertArgumentsToArray( arguments ) ));
return ret;
}
})(prop[name]);
}
// The dummy class constructor
function Class() {
// All construction is actually done in the init method
if ( !initializing && this.init )
this.init.apply(this, arguments);
}
// Populate our constructed prototype object
Class.prototype = prototype;
// Enforce the constructor to be what we expect
Class.prototype.constructor = Class;
// And make this class extendable
Class.extend = arguments.callee;
return Class;
};
})();
var Example = Class.extend({
method: function(_this, timeout) {
console.log('timeout defined is ' + timeout);
setTimeout(function() {
_this.callback( 15 );
}, timeout);
},
callback: function(_this, arg1) {
console.log('callback from _this argument, current context: ', this);
console.log(_this === this);
console.log(arg1 === 15);
}
});
var Sample = Example.extend({
method: function(_this, timeout) {
this._super(timeout);
console.log('I was called from sample');
},
callback: function(_this) {
console.log('I am supplied from Sample');
}
});
var example = new Example();
example.method(5);
var sample = new Sample();
sample.method(10);注意$timeout计时器设置为0ms以立即启动摘要周期。
答案 3 :(得分：0)
发布了正确的代码。我正在将$ get调用分配给$ scope.variable，我刚删除它并开始工作。感谢