将数据从 Angular 服务传递到控制器并刷新视图答案

【问题标题】：Passing data from Angular service to controller and refreshing view将数据从 Angular 服务传递到控制器并刷新视图
【发布时间】：2014-11-07 20:03:26
【问题描述】：

所以我有一个引导列表：

<div class="ajax_company_list" ng-app="app">
    <div class='list-group' ng-controller="PolicyController as policyCtrl">
         <a href="#" class='list-group-item' ng-repeat="company in policyCtrl.companies">{{company.primary_name}}
         </a>               
         <div id="loadingIcon" class='list-group-item'>
              Loading...
         </div>
    </div>
</div>

这是我的 Angular Javascript：

var app = angular.module('app', []);

app.controller('PolicyController', ['$scope', 'CompanyService', function($scope, CompanyService) {

    $scope.companies = [

    {
        policy_number: 12345,
        primary_name: "test"
    }

    ];

    $scope.getCompanies = function() {

        CompanyService.fetchCompanies()
            .success(function(data) {

                $scope.companies = data.companies;

            })

        }

    }]);

app.factory('CompanyService', ['$http', function($http) {

    return {

        fetchCompanies: function() {

            return $http.get('http://spoonerinc:8886//json/glmod_Spooner-Inc?pagenum=1');

        }

}

}]);

我基本上有两个问题。如果我将 $scope.companies 设置为一个对象数组，它不会显示，但如果我将 $scope.companies 更改为 this.companies，它会再次开始工作。这是为什么呢？

第二个问题，我可以看到在我的网络选项卡中运行的服务调用，并且可以控制台记录数据并且它读取正常。但它根本没有更新我的实际列表，我不确定我做错了什么。

我是 Angular 的新手，所以如果有任何关于如何更好地编写代码的建议，请告诉我。

谢谢！

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

因为您使用的是"Controller As" 语法，它有效地将整个控制器对象发布到作用域。

幕后发生的事情看起来像这样：

function myCtrl($scope){

  $scope['someAlias'] = this;

}

如果您打算将控制器用作语法，最好使用更基于对象的方法，而不是将内容推送到 $scope

在原型上：

function myCtrl(companiesService){
   this.companiesService = companiesService;
   this.init();
}

myCtrl.prototype = {
  init:function(){
    var _this = this;

    _this.companiesService.get()
      .then(function(result){
         _this.companies = result.data;
      });
  }
};

或作为闭包样式对象：

function myCtrl(comapniesService){
   var ctrl = {};

   function init(){
      companiesService.get()
      .then(function(result){
         ctrl.companies = result.data;
      });
   }

   return ctrl;
}

【讨论】：

天哪，我不敢相信这一直是问题所在。这同时解决了两个答案，我会尽可能接受。谢谢！

【解决方案2】：

关于你的第二个问题，我认为你的问题就在这里：

ng-repeat="company in policyCtrl.companies"

您不需要将控制器指定为前缀，因为您已经使用 ng-controller 声明了它。应该是：

ng-repeat="company in companies"

而 ng-controller 是：

ng-controller="PolicyController"

我的猜测是，一旦你纠正了这个问题，第一个问题就会消失。

【讨论】：