Question

我想知道使用什么模式，如果我需要我的服务来共享它在Controller，Directives等之间的动态数据。我之所以提到动态，是因为我想加载新数据和这些数据需要在任何其他控制器，指令等中可用。例如，如果指令生成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，因此我认为每次需要更新或加载数据时都需要至少使用一个promise，然后触发正确的事件。

我对AngularJs缺乏经验让我对我的想法产生怀疑，所以非常感谢任何帮助或建议！

感谢您的期待！

Answer 1

我想我找到了一个可能的答案，使用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/

找到代码

任何提示或建议都非常感谢，

非常感谢您的时间：）

Answer 2

我不知道这是否有帮助，但我最近使用

在两个控制器和服务之间共享数据

$rootScope.$broadcast解雇 $scope.$on抓住变化

据我所知，Angular是观察者模式的实现

如何在控制器和指令之间共享服务动态数据

2 个答案: