从$ http.get调用更新Angular作用域变量
[英]Updating Angular scope variables from $http.get call
问题描述
我是Angular的新手，我试图弄清楚为什么设置范围变量后不更新。
我正在调用Node API，以重现包含我的数据的json对象。 除了将$ scope.profile设置为从API返回的数据外，其他一切似乎都正常运行。
设定：
app.js
(function() {
var app = angular.module("gamedin", []);
app.controller('profileController', function($scope, $http, $timeout) {
$scope.profile = {};
$scope.getProfile = function() {
var vanityUrl = $scope.text.substr($scope.text.lastIndexOf('/') + 1);
$http.get('/steamid/' + vanityUrl)
.then(function(data) {
$http.get('/profile/' + data.data.response.steamid)
.then(function(data) {
console.log(data.data.response.players[0]); // Correct data
$scope.profile = data.data.response.players[0]; // View isn't updated
})
})
// Reset the input text
$scope.text = "";
}
});
...
app.directive('giHeader', function() {
return {
restrict: 'E',
templateUrl: 'components/header/template.html'
};
})
app.directive('giProfile', function() {
return {
restrict: 'E',
templateUrl: 'components/profile/template.html'
}
})
})();
components / header / template.html
<header>
<div class="header-content" ng-controller="profileController">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="header-content-inner">
<input ng-model="text" ng-keyup="$event.keyCode == 13 && getProfile()" class="form-control" type="text" placeholder="Enter Steam URL">
</div>
<p>e.g., http://steamcommunity.com/id/verydankprofilelink</p>
</div>
<div class="col-md-3"></div>
</div>
</header>
组件/profile/template.html
<div class="container">
<div ng-controller="profileController">
<h3>
<strong>Username: {{ profile.personaname }}</strong>
</h3>
<p> SteamID: {{ profile.steamid }}</p>
</div>
</div>
index.html
<!doctype html>
<html ng-app="gamedin">
<head>
...
</head>
<body>
...
<gi-header></gi-header>
<gi-profile></gi-profile>
...
</body>
</html>
我试过将它包装在$ scope。$ apply中，像这样
$scope.$apply(function () {
$scope.profile = data.data.response.players[0];
});
...导致Error: [$rootScope:inprog]
然后我尝试
$timeout(function () {
$scope.profile = data.data.response.players[0];
}, 0);
和
$scope.$evalAsync(function() {
$scope.profile = data.data.response.players[0];
});
...尽管没有引发任何错误，但视图仍未更新。
我意识到我可能无法正确理解角度的某些方面，所以请赐教！
2 个解决方案
解决方案1
1 已采纳 2016-04-10 14:46:42
问题在于您有2个profileController实例，每个指令模板一个。 它们应该共享同一个实例，因为现在发生的是一个实例在其作用域上更新profile变量，而另一个实例不知道。 即，标题模板的profileController实例正在执行调用，并且您希望看到配置文件模板上的更改。
您需要重组。 我建议在使用指令的页面中使用控制器，并在两个指令中共享配置文件对象：
<gi-header profile="profile"></gi-header>
<gi-profile profile="profile"></gi-profile>
并在每个指令中：
return {
restrict: 'E',
scope: {
profile: '='
},
templateUrl: 'components/header/template.html'
};
还有一个更一般的说明-如果您想在指令中使用控制器，则可能应该使用指令的“ controller”属性。
解决方案2
0 2016-04-10 13:47:41
尝试改用此方法：
$http.get('/steamid/' + vanityUrl)
.then(function(data) {
return $http.get('/profile/' + data.data.response.steamid).then(function(data) {
return data;
});
})
.then(function(data) {
$scope.profile = data.data.response.players[0]; // View isn't updated
})
您在其中使用两个解析而不是一个解析，然后从第二个解析更新作用域。
Angular：如何从$ http.get方法外部访问angular $ scope.ng-model_name？
[英]Angular: How to access angular $scope.ng-model_name from outside $http.get method?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.