Question

我将jquery代码迁移到AngularJs。

我现有的代码从ajax调用中获取名称列表，然后通过返回列表的get函数公开。此列表位于名为＆＃34; dataBrowser＆＃34;。

的对象中

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

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

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

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

我有一个全局＆＃34;应用程序＆＃34;，所以我可以通过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 个答案: