AngularJS：如何将数据从服务传递到控制器？答案

【问题标题】：AngularJS: How do I communicate data from a service to a controller?AngularJS：如何将数据从服务传递到控制器？
【发布时间】：2015-04-22 20:55:41
【问题描述】：

我是 AngularJS 的新手，对 JavaScript 不是很熟悉。我正在尝试使用 AngularJS v1.3.15 制作一个简单的应用程序。

我有这个控制器：

var app = angular.module('game', [])
app.controller('SimpleController', ['market_data', function(market_data) {

    this.city_name = "City";
    market_data.success(function(data) {
        console.log(data.city_name);
        this.city_name = data.city_name;
    });
}]);

还有这个观点：

<div ng-controller="SimpleController as simple" >
  <h1>Hello {{simple.city_name}}!</h1>
</div>

城市名称行从默认值不变：City。

据我所知，market_data 服务似乎运行良好。我对console.log 的调用打印出我希望服务返回的字符串。所以，data.city_name 包含正确的信息，但 this.city_name 不会更新控制器。

将这些数据导入控制器以使其显示在我的视图中的最佳方法是什么？

【问题讨论】：

标签： javascript angularjs frameworks

【解决方案1】：

为this 使用局部变量。 vm（视图模型）是常用的。

var app = angular.module('game', [])
app.controller('SimpleController', ['market_data', function(market_data) {

    var vm = this;
    vm.city_name = "City";

    market_data.success(function(data) {
        console.log(data.city_name);
        vm.city_name = data.city_name;
    });
}]);

【讨论】：

谢谢。我希望有一种方法可以在没有 $scope 变量的情况下做到这一点。

【解决方案2】：

您必须将城市的值保存在$scope 中，而不是使用this。像这样

app.controller('SimpleController', ['$scope', 'market_data', function($scope, market_data) {
    $scope.city_name = "City";
    market_data.success(function(data) {
        console.log(data.city_name);
        $scope.city_name = data.city_name;
    });
 }]);

【讨论】：

【解决方案3】：

使用此代码：

var app = angular.module('game', [])
app.controller('SimpleController', ['market_data', function(market_data) {

    $scope.city_name = "City";
    market_data.success(function(data) {
        console.log(data.city_name);
        $scope.city_name = data.city_name;
    });
}]);



<div ng-controller="SimpleController" >
  <h1>Hello {{simple.city_name}}!</h1>
</div>

【讨论】：