Question

我是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不会更新控制器。

将这些数据输入控制器的最佳方式是什么，以便它显示在我的视图中？

Answer 1

为this使用局部变量。 vm（viewmodel）是常用的。

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;
    });
}]);

Answer 2

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

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;
    });
 }]);

Answer 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>

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

3 个答案: