0

我想知道要使用什么模式，如果我需要我的服务在控制器、指令等之间共享它的动态数据。我提到动态的原因是因为我想加载新数据并且这些数据需要可在任何其他控制器、指令等中使用。例如，如果指令生成 UL LI，如果服务内的数据发生更改，则必须重新生成它！

我最初打开了以下内容（如何在返回承诺的服务中创建 reset() 方法？），有人指出我应该使用观察者模式。我非常感谢，我很快就写了这篇文章，作为我需要做的事情的一个高峰，我们将非常感谢您的评论（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

我不知道这是否有帮助，但我最近通过使用在两个控制器和一个服务之间共享数据

$rootScope.$broadcast触发并 $scope.$on捕捉变化

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

于 2013-10-15T12:49:48.950 回答
0

我想我找到了一个可能的答案，使用承诺和观察者模式（如果这是正确的并描述了我在做什么）：

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 回答