html頁面之間共享數據 - angularJs

Question

我有page1.html有一個對象列表，當用戶點擊一個對象時，網站應該導航到其他頁面並顯示對象的詳細信息。

1.HTML頁AHS表中，每行是對象：

<tr ng-repeat="abjcet in nc.object"> 
      <td>{{object.title}}</td> 
    </tr> 

2，當用戶點擊標題相同的對象必須轉移到下一個HTML頁面，我已經嘗試這一點，我的對象被檢索，但我不知道如何保存它，並在接下來的HTML頁面中使用它：

<tr ng-repeat="object in nc.objects"> 
    <td ng-click="getById(object.id)">{{object.title}}</td> 
</tr> 

我的控制器：

(function() { 
    'user strict'; 

    angular.module('app').controller('myController', myController); 

    myController.$inject = ['$http', '$scope' ]; 

function myController($http , $scope) { 

     var nc = this; 
     nc.objects = []; 
     nc.object = null; 

    nc.getById = getById ; 

    init(); 


    function init(){ 
     getAll(); 

    } 

    function getAll() 
    { 
     var url = "/getAll/"; 
     var Request = $http.get(url); 
     Request.then(function (response) { 

      nc.objects = response.data; 

     }); 
    } 

    function getById(id) { 

     var url = "/findById/"+id; 
     var Request = $http.get(url); 
     Request.then(function (response) { 

      nc.object = response.data; 

     }); 
    } 

} 
})(); 

Answer 1

如果您需要導航到另一個頁面，或者使用SPA（單頁應用程序）和跨所有控制器共享數據的服務，則可以使用localStorage。

// Save the title 
localStorage.setItem('title', $scope.title); 
// Retrieve the title 
$scope.title = localStorage.getItem('title'); 

Answer 2

如果您的HTML應用程序爲completely a single page application，則將$rootScope添加到myController.$inject，然後將其保存在$rootScope中，可以在多個頁面中訪問它。

相反，如果您有兩個控制器在不同頁面上使用的service，請在該變量的service中執行getters and setters。

希望它可以幫助你！

Answer 3

多解

1. 使用本地存儲，可以維護一個數據，並在多個頁面堅持它，這是最安全和最簡單的方法。開箱即用的模塊有很多，並且做得很好：Angular local storage。

實施例：

myApp.controller('MainCtrl', function($scope, localStorageService) { 
    // setter 
    localStorageService.set('title', 'value'); 
    // getter 
    var title = localStorageService.get('title'); 
}); 

Routing 可以使用路由通過SPA（單頁應用程序）保持的數據，這將停止瀏覽器從實際重新加載網頁，並允許用戶請求下一個視圖/頁面。這意味着您可以將數據保存在工廠中，數據將保存在內部存儲器中。

例子：

//factory 
myApp.factory('Data', function() { 
    var data = {}; 
    return { 
     get :get, 
     set : set 
    }; 
    // setter 
    function set(key, val){ 
     data[key] = val; 
    } 
    // getter 
    function get(key) { 
     return data[key] || null; 
    } 
}); 

myApp.controller('MainCtrl', function(Data) { 
    // setter 
    Data.set('title', 'value'); 
    // getter 
    var title = Data.get('title'); 
});