如何在控制器和指令之間共享服務動態數據

我想知道使用哪種模式，如果我需要我的服務在控制器，指令等之間共享動態數據。我提到動態的原因是因爲我' d需要加載新數據，並且此數據需要在任何其他控制器，指令等中可用。例如，如果指令生成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，所以我認爲每次需要更新或加載數據時都需要使用至少一個承諾，然後觸發正確的事件。

我對AngularJs的經驗不足導致我質疑自己的想法，因此非常感謝任何幫助或建議！

感謝您的期待！

來源

2013-10-02 punkbit

我想我找到了一個可能的答案，用承諾和觀察者模式（如果這是正確的，說明我在做什麼）：

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-02 01:56:50 punkbit

我不知道如果這有助於但是我recentl Ÿ使用

$rootScope.$broadcast火災和 $scope.$on趕上變化

據我可以告訴它棱角分明的實現觀察者模式的共享兩個控制器和服務之間的數據

來源

2013-10-15 12:49:48

如何在控制器和指令之間共享服務動態數據

回答

相關問題