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

dly7yett 于 2023-02-03 发布在 Angular

关注(0)|答案(2)|浏览(137)

如果我需要服务在控制器、指令等之间共享其动态数据，我想知道使用什么模式。我之所以提到动态，是因为我希望加载新数据，并且此数据需要在任何其他控制器、指令等中可用。例如，如果指令生成UL LI，则在服务内的数据发生变化时，它必须重新生成UL LI！
我最初打开this question，有人建议我应该使用观察者模式，我很快就写了this code，作为我需要做的事情的一个高峰。

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缺乏经验，这促使我质疑自己的想法。

angularjs

来源：https://stackoverflow.com/questions/19128660/how-share-service-dynamic-data-between-controllers-and-directives

2条答案

按热度按时间

7uzetpgm1#

我不知道这是否有帮助，但我最近使用在两个控制器和一个服务之间共享了数据
$rootScope.$broadcast用于激发，$scope.$on用于捕获更改
据我所知，这是Angular对观察者模式的实现

赞(0）回复(0）举报 2023-02-03

2hh7jdfx2#

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

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/上找到该代码

赞(0）回复(0）举报 2023-02-03

我来回答

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

2条答案

相关问题

热门标签

最新问答