Javascript 从AngularJS控制器获取数据_Javascript_Jquery_Angularjs

Javascript 从AngularJS控制器获取数据

javascript jquery angularjs

Javascript 从AngularJS控制器获取数据,javascript,jquery,angularjs,Javascript,Jquery,Angularjs,我正在将jquery代码迁移到AngularJs 我现有的代码从ajax调用中获取一个名称列表，然后通过返回列表的get函数公开这些名称。此列表位于名为“dataBrowser”的对象中因此，基本上在我现有的代码中，我可以做到： $.each(this.dataBrowser.getList(), function(key, item) { // print table row to html }); 现在，我想使用ng repeat在表中显示该列表我的问题是，如何最好地从控制器访

我正在将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作为对象传递到控制器中吗

最好的方法是什么？

是的，因此您应该将数据存储在一个服务或工厂中，通常该服务或工厂也会处理数据的获取，然后将数据注入控制器中，以便在ng repeat中使用。我将在这里制作一个基本的plnkr样本

还有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>


安古拉斯普朗克
文件。写（“”）；
你好{{{thing.label}

最好的方法是将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();
});

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

但是，如果ajax调用非常复杂，此时您不想迁移它，那么您可以简单地让服务从全局范围访问它，而不是调用本身。或者将当前的ajax调用抛出到$rootScope上

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

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

然后注入$rootScope。我想这个故事的寓意是，有很多方法可以解决你的问题，但总的来说，最好不要把角度和非角度混为一谈，不是因为我认为你应该关心角度纯粹主义者会说什么（我不这么认为），而是因为角度主义者相当固执己见。大多数东西在angularjs生态系统中运行得更好。

您可以通过调用angularjs服务将其分配给范围变量。您可以在那里创建服务并编写代码来获取数据。获得了服务概念，这正是我要寻找的。问题：然后注入$rootScope。。。你介意澄清一下吗？我正在迁移一个大项目（一年的工作），所以只能一点一点地进行迁移，我希望避免向服务中添加全局内容，因此在旧代码中执行全局内容是更好的解决方案（因为最终会被迁移）。您可以像任何其他服务一样注入

$rootScope

。类似于

app.controller（'MyController'，function（$scope，$rootScope）{/…}）

虽然$rootScope实际上并不比

窗口

好多少。本质上，它仍然是一个全局范围：角度应用程序的全局范围。但是在某些情况下它是有用的。只是为了防止其他人想知道如何从遗留代码访问服务：

var service=angular.element（document.injector（）.get（'LayerService'）谢谢你的回答，太好了。我无法提高投票率，因为我还没有足够的声誉：(