0

サービスでコントローラーやディレクティブなどの間で動的データを共有する必要がある場合、使用するパターンを知りたいです。動的に言及する理由は、新しいデータをロードしたいので、このデータをたとえば、ディレクティブが UL LI を生成する場合、サービス内のデータが変更された場合は再生成する必要があります。

私は最初に次を開きました ( How to create reset() method in Service that return promise? ) そして、誰かが 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 から取得されるため、データを更新またはロードする必要があるたびに少なくとも promise を使用し、適切なイベントをトリガーする必要があると思います。

AngularJs の経験が不足しているため、自分の考えに疑問を抱くようになりました。そのため、助けやアドバイスをいただければ幸いです。

ご覧いただきありがとうございます。

4

2 に答える 2

0

promise と Observer Pattern を使用して、可能な答えを見つけたと思います (これが正しく、私がしていることを説明している場合):

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/にあります。

于 2013-10-02T01:56:50.193 に答える
0

これが役立つかどうかはわかりませんが、最近、2 つのコントローラーとサービスの間でデータを共有しました。

$rootScope.$broadcast起動し $scope.$onて変更をキャッチする

私が知る限り、オブザーバーパターンのAngularの実装です

于 2013-10-15T12:49:48.950 に答える