Как се споделят динамични данни за услугата между контролери и директиви

Бих искал да знам какъв модел да използвам, ако имам нужда моята услуга да споделя своите динамични данни между контролер, директиви и т.н. Причината, поради която споменавам динамични, е, че бих искал да заредя нови данни и тези данни трябва да бъдат наличен във всеки друг контролер, директива и т.н. Например, ако директива генерира UL LI, тя ще трябва да го генерира отново, ако данните в услугата са се променили!

Първоначално отворих следното ( Как да създам нулиране () метод в услуга, който връща обещание? ) и някой ми посочи, че трябва да използвам модела на наблюдател. За което съм много благодарен и написах това много бързо като крачка към това, което трябва да направя, и коментарите ще бъдат изключително оценени ( 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

Мисля, че намерих възможен отговор, използвайки promise и модела на наблюдател (ако това е правилно и описва какво правя):

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