0

在我的应用定义中，我有：

var myVtModule = angular.module('vtApp', ['myAppDev','mongoAPI']);
myVtModule.run(function($rootScope, $location, Shop){
    $rootScope.shopData = {};
    Shop.getShop(function(response){
        $rootScope.shopData = response;
    });
})

Shop 是一种从服务器检索数据的服务，它可以工作。问题是在控制器中我并不总是可以访问shopData，有时是空的，有时工作正常。

function SupportCtrl($rootScope, $scope) {
    console.log ($rootScope.shopData);
}

为什么在收到服务响应时不更新？我不能把 Shop.getShop 放在控制器中，因为我到处都需要它......

4

3 回答 3

1

我的建议是使用控制器继承和服务，以便您的子控制器始终可以访问商店。这是一个演示：

http://beta.plnkr.co/edit/DtjwLMi3jHCdzThEJDNn?p=preview

代码：

angular.module('myApp', ['myApp.services']);

function MainCtrl($scope, ShopService) {
   $scope.shop = ShopService.getShop();
}
function ChildCtrl($scope) {
}
angular.module('myApp.services', []).
    factory('ShopService', function ($rootScope) {
        var shop = {
          storename: 'your store'
        };

        var service = {
              getShop: function() {
                return shop;
              }
        }

        return service;
    });

设置子控制器关系的 HTML：

<html ng-app="myApp" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
   The store is {{shop.storename}}
  <div ng-controller="ChildCtrl">
      The store name is: {{shop.storename}}

  </div>
</body>
</html>

您会注意到，shop由于父作用域检索到了它，所以它对孩子可用。我设置了服务，以便您可以使其可测试/等。除了继承之外，您还可以轻松地将 in 注入ShopService每个控制器并让它们进行调用，但是如果您有很多控制器可能会变得乏味。

有关范围继承的更多信息：

我可以继承父控制器的变量吗？ http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller

于 2013-04-25T16:07:39.127 回答
0

如果您需要控制器中的结果，您应该跳过myVtModule.run并执行以下操作：

function SupportCtrl($scope, Shop) {
  Shop.getShop(function(response){
    console.log (response);
    //do something, put response in $scope or $scope.$rootScope etc...
  });
}
于 2013-04-25T14:00:22.093 回答
0

您的 ng-controller 范围都原型继承自 rootScope（最终），因此它们都可以访问您在 rootScope 上定义的任何对象。由于从服务器检索数据是异步操作，因此您的控制器可能会在服务器数据返回之前执行。

您可以在控制器中使用$watch来确定数据何时实际可用。但是，如果您只想在数据可用时更新视图，则不必使用 $watch。当数据可用时，Angular 应该会自动更新您的视图。例如，

function SupportCtrl($rootScope, $scope) {
  $scope.shopData = $rootScope.shopData;
}

那么在你看来：

<div ng-controller="SupportCtrl">shopData = {{shopData}}</div>

Fiddle - 我使用$timeout. 请注意，在小提琴中，我还使用angular.copy()更新控制器的引用，而不是分配$rootScope.shopData给新的/不同的数组：

app.run(function($rootScope, $timeout){
    $rootScope.shopData = [];
    $timeout(function() {
        angular.copy([{d1: 'data1', d2: 'data2'}], $rootScope.shopData);
    }, 2000);
});
于 2013-04-26T03:35:39.420 回答