如何修复在指令中显示来自服务的数据，除非使用angularjs刷新页面？

我有以下资料：

1 - MyService - a service that requests some data via $http
2 - MyDirective - a directive I want to show the data retrieved from the service

我的问题是，当我第一次加载页面时，从MyService检索到的数据似乎根本没有显示在指令中。当我重新加载页面时，它显示得很好。所有后续的重新加载都可以

事件顺序如下：

1- Service fetches "data", a promise tracking when data comes back, then broadcasts a "ready" message to the directive.
2- Directive receives the "ready" with $on and puts the "data" somewhere viewable on the directive.

当我第一次访问URL时：

1- The directive shows up, but with none of the "data" from the service shows up.
2- Refresh the page/route
3- The directive shows up with the correct data.

由于检索，它似乎没有显示，但当我注销指令中的$on emitters时，服务似乎已成功接收到数据，并且它没有显示为“未定义”，但未能实际将它们放入指令中。。。问题是什么？我该如何解决

注:

- The $on's that check for the ready event are in the directive's "controller:". 
- The directive's "link:" calls on the directive's "controller" methods for initialization (without any data from the service, as that logic is in the $on).

---

这是一个计时问题，当接收到数据并触发事件时，您的指令可能尚未构建。当您重新加载页面时，它会工作，因为您的指令模板可能会被缓存，从而使它的构建速度更快

我解决这个问题的方法是使用$watch。下面是一些示例代码：

app.controller('MyController',function($scope, MyService){
     //Get data here using your MyService and assign to $scope.data
});

app.directive('MyDirective', function() {

return {
   restrict: 'EA',
   controller: function($scope) {
        $scope.$watch("data",function(newValue,OldValue,scope){
             //do your work here when data is changed.
        });  
      }
   };
};

如果使用隔离作用域。请尝试以下代码：

app.controller('MyController',function($scope, MyService){
         //Get data here using your MyService and assign to $scope.data
    });

    app.directive('MyDirective', function() {

    return {
       restrict: 'EA',
       scope:{
          mydata:"="
       },
       controller: function($scope) {
            $scope.$watch("mydata",function(newValue,OldValue,scope){ //listen for mydata changes
                 //do your work here when data is changed.
            });  
          }
       };
    };

将绑定分配给html：

<div my-directive mydata="data"/>

---

您似乎误解了服务的使用。服务本身没有加载数据，而是被注入，调用由服务的调用方对象/控制器/指令完成

虽然您没有发布服务代码，但您的问题似乎是，angular正在构建用于注入的服务，但此时您已经启动了

$http

调用并等待结果。当数据到达时，您不知道谁需要数据，因为服务工厂总是一个单例

以下操作应始终有效，因为在编译指令并处于链接阶段时，请求是send。回调位于正确的位置，可以将结果设置为作用域（实际需要的位置）

（请随意编辑此..来自我的想法，未检查错误）

{{item}

更新 最好的方法是无论如何使用；）如果格式适用，但很多是可配置的。将angular-resource.js包含在index.html中，并将“ngResource”作为模块包含在应用程序中->这是自1.2版以来需要做的新工作

.factory('MyData', function($http) {
  var MyData = {};
  MyData.callData = function(method, url) {
    return $http(method, url);
  }
  return MyData;
})

.directive('myDirective', function(MyData) {
  return {
    restrict: 'E',
    link: function(scope, elem, attr) {
      MyData.callData('GET', '/something/useful')
        .success(function(data, status, headers, config) {
          $scope.items = data;
        });
    }
  }
});

<my-directive>
  <ul>
    <li ng-repeat="item in items">{{item}}</li>
  </ul>
</my-directive>