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

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

Сначала я открыл следующее ( How to create reset () в Service, который возвращает обещание?), и кто-то указал мне, что я должен использовать шаблон Observer. За что я очень благодарен, и я написал это очень быстро, так как мне нужно сделать, и комментарии были бы очень признательны ( 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 заставляет меня сомневаться в своих мыслях, поэтому любая помощь или совет очень ценятся!

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


promise angularjs observer-pattern angularjs-directive angularjs-service
person punkbit    schedule 02.10.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

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/.

Любые советы или советы чрезвычайно ценны,

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

person punkbit    schedule 02.10.2013

arrow_upward
0
arrow_downward

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

$rootScope.$broadcast для активации и $scope.$on для отслеживания изменений

насколько я могу судить, это реализация Angular шаблона наблюдателя

person Val Redchenko    schedule 15.10.2013