Как использовать динамические данные службы между контроллерами и директивами

Question

Я хотел бы знать, какой шаблон использовать, если мне нужна моя служба для обмена динамическими данными между контроллером, директивами и т. Д. Причина, по которой я упоминаю динамику, d хотел бы загружать новые данные, и эти данные должны быть доступны в любом другом контроллере, директиве и т. д. Например, если директива генерирует UL LI, она должна будет сгенерировать ее, если данные внутри Сервиса изменились!

Сначала я открыл следующее (How to create reset() method in Service that return promise?), и кто-то указал мне, что я должен использовать шаблон наблюдателя. Что я очень благодарен, и я написал это очень быстро, как шип, что мне нужно делать, и замечания будут чрезвычайно оценены (http://jsbin.com/epAMaP/1)

var MyApp = angular.module('MyApp', []); 

MyApp.config(function($locationProvider){ 

    $locationProvider.hashPrefix('!'); 

}); 

MyApp.factory('MyService', function($timeout){ 

    var data; 

    var loadData = function(){ 

     data = { 
      foo: "bar", 
      time: new Date() 
     }; 

     return data; 

    }; 

    return { 

     refresh: function(){ 

      loadData(); 

     }, 

     getData: function(){ 

      return loadData(); 

     } 

    }; 

}); 

MyApp.controller('MyCtrl', function($scope,MyService,$timeout){ 

    $scope.foo = "Service share data"; 

    $scope.data = MyService.getData(); 

    $scope.$on("eventFoo", function(){ 
    console.log("Data has changed!"); 
    console.log($scope.data); 
    }); 

    $timeout(function(){ 
    MyService.refresh(); 
    $scope.$apply(function(){ 
     $scope.data = MyService.getData(); 

     $scope.$emit("eventFoo"); 
    }); 
    }, 3000); 

}); 

MyApp.directive('myDirective', function(MyService,$timeout){ 

    return { 
     restrict: 'A', 
     link: function(scope, elem, attrs){ 
      scope.$on("eventFoo", function(){ 
       console.log("Event foo triggered!"); 

       scope.data = MyService.getData(); 

       console.log(scope.data); 
      }); 
     } 
    }; 

}); 

Я думаю, что это позволит решить большинство моих проблем, но есть кое-что Мне нужно помнить. Данные, которые я загружу, поступают из $ http GET, поэтому я считаю, что мне нужно использовать хотя бы обещание каждый раз, когда мне нужно обновлять или загружать данные, а затем запускать правильное событие.

Отсутствие опыта работы с AngularJs побуждает меня подвергать сомнению мои мысли, поэтому любая помощь или совет чрезвычайно ценится!

Спасибо, что посмотрели!

Answer 1

Я думаю, что я нашел возможный ответ, используя обещание и шаблон Observer (если это правильно и описывает то, что я делаю):

var MyApp = angular.module('MyApp', []); 

MyApp.config(function($locationProvider){ 

    $locationProvider.hashPrefix('!'); 

}); 

MyApp.factory('MyService', function($q,$timeout,$rootScope){ 

    var deferred; 
    var data; 

    var loadData = function(){ 

     data = { 
      foo: "bar" + Math.floor((Math.random()*100)+1), 
      time: new Date() 
     }; 

     deferred.resolve(data); 

    }; 

    return { 

     getPromise: function(){ 

      deferred = $q.defer(); 
      loadData(); 

      return deferred.promise; 

     }, 

     getData: function(){ 

      return data; 

     } 

    }; 

}); 

MyApp.controller('MyCtrl', function($scope,MyService,$timeout){ 

    $scope.foo = "Service share data"; 

    MyService.getPromise().then(function(data){ 
    $scope.data = data; 
    console.log("Initial data request:"); 
    console.log($scope.data); 
    $scope.$emit("eventFoo"); 
    }); 

    // then after awhile a user requests updated data 
    $timeout(function(){ 

    console.log("// then after awhile a user requests updated data"); 

    $scope.$apply(function(){ 

     MyService.getPromise().then(function(data){ 

      $scope.data = MyService.getData(); 
      $scope.$emit("eventFoo"); 

     });   

    }); 
    }, 3000); 

}); 

MyApp.directive('myDirective', function(MyService,$timeout){ 

    return { 
     restrict: 'A', 
     link: function(scope, elem, attrs){ 
      scope.$on("eventFoo", function(){ 
       console.log("Event foo triggered!"); 

       scope.data = MyService.getData(); 

       console.log(scope.data); 
      }); 
     } 
    }; 

}); 

Вы можете найти код жить в http://jsbin.com/ahiYiBu/1/

Любые советы или рекомендации крайне признателен,

Спасибо большое за ваше время :)

Answer 2

Я не знаю, если это помогает, но я recentl у общих данных между двумя контроллерами и обслуживание с помощью

$rootScope.$broadcast к огню и $scope.$on поймать изменения

насколько я могу сказать, это является реализация угловых по образцу наблюдателя