Question

我有page1.html有一个对象列表，当用户点击一个对象时，网站应该导航到其他页面并显示对象详细信息。

1.HTML Page是一个表，每一行都是对象：

<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，请在getters and setters中为该变量实施service。

希望它可以帮到你！

Answer 3

多种解决方案

使用本地存储，您可以维护该数据并将其保存在多个页面中，这是最安全，最简单的方法。开箱即用的模块很多，并且做得很好：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');
});

在html页面之间共享数据 - angularJs

3 个答案: