从AngularJS控制器获取数据

Question

我正在将jquery代码迁移到AngularJs。

我现有的代码从ajax调用中获取一个名称列表，然后通过返回列表的get函数公开。 此列表位于名为“dataBrowser”的对象中。

所以基本上在我现有的代码中我可以做到：

$.each(this.dataBrowser.getList(), function(key, item)
{
    // print table row to html
});

现在我想使用ng-repeat在表格中显示该列表。

我的问题是，如何从控制器中最好地访问dataBrowser.getList（）？

我有一个全局“应用程序”，所以我可以通过application.dataBrowser.getList（）获取它，但我不喜欢使用全局。 在创建数据时，我应该将dataBrowser作为对象传递给控制器吗？

什么是最好的方法？

Answer 1

最好的方法是将ajax调用放在使用$ http并访问服务数据的服务中。 所以像

var app = angular.module('app');
app.factory('DataBrowser' /*or whatever*/, function($http) {
  var data = {};
  // Or put this in a method on the returned object
  // if you want to invoke at some point other than load
  $http.get('/some/url').then(function(response) {
    data = response;
  });
  return {
    getData: function() {
      return data;
    }
  };
});

app.controller('SomeController', function($scope, DataBrowser) {
  $scope.data = DataBrowser.getData();
});

但是，如果ajax调用足够复杂，以至于您此时不想迁移它，则可以简单地让服务从全局范围访问它，而不是自己进行调用。 或者让当前的ajax调用它在$ rootScope上抛出类似的东西

$('body').scope().dataBrowser = data;

然后注入$ rootScope。 我想这个故事的寓意是有很多方法可以解决你的问题，但总的来说，最好不要将角度与无角度混合，而不是因为我认为你应该关心角度纯粹主义者会说什么（我不要），但因为角度相当自以为是。 大多数事物只有在角度生态系统中才能更好地工作。

Answer 2

是的，所以你应该将数据存储在服务或工厂中，通常也处理获取数据然后将其注入控制器以用于ng-repeat。 我将把这里的基本样本plnkr放在一起。

http://plnkr.co/edit/4NYFJ03ldsISSNF3aqoB?p=preview

angular.module('plunker', [])
  .factory('MyDataService', function($http){
    //Using $http here to do the AJAX request

    var service = {};

    service.getData = function(){
      return $http.get('data.json').then(function(resp){
        service.data = resp.data;
      })
    }

    service.getData();

    return service;
  })
  .controller('MainCtrl', function(MyDataService) {
    this.MyDataService = MyDataService;
  });

和HTML

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script data-require="angular.js@1.4.0-rc.0" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl as mainCtrl">
    <p ng-repeat="thing in mainCtrl.MyDataService.data">Hello {{thing.label}}!</p>
  </body>

</html>

从AngularJS控制器获取数据

问题描述

2 个解决方案

解决方案1
4 已采纳 2015-04-16 01:45:20

解决方案2
3 2015-04-16 01:37:14

从AngularJS控制器获取数据

问题描述

2 个解决方案

解决方案1 4 已采纳 2015-04-16 01:45:20

解决方案2 3 2015-04-16 01:37:14

解决方案1
4 已采纳 2015-04-16 01:45:20

解决方案2
3 2015-04-16 01:37:14