Question

我正在使用tabletop.js，handlebars.js和angular.js创建Web应用程序

因此，数据来自谷歌电子表格并使用角度进行路由但是当路由到另一个页面并返回后数据消失

有人可以提供解决方案吗，我已经尝试过搜索但还没有运气：/

桌面控制器

  var public_spreadsheet_url = 'https://docs.google.com/spreadsheet/pub?hl=en_US&hl=en_US&key=0AkLy8qCw6J5EdGlmeFZEVVVZZ3ZUSEhYcjhEdEZKelE&output=html';

  $(document).ready( function() {
    Tabletop.init( { key: public_spreadsheet_url,
                     callback: showInfo,
                     parseNumbers: true } );
  });

  function showInfo(data, tabletop) {
    var source   = $("#cat-template").html();
    var template = Handlebars.compile(source);

    $.each( tabletop.sheets("Cats").all(), function(i, cat) {
      var html = template(cat);
      $("#content").append(html);
    });
  }

这些是角度脚本

    var routeApp = angular.module('routeApp', []);

    routeApp.filter('range', function() {
        return function(input, total) {
            total = parseInt(total);
            for (var i=0; i<total; i++) {
                input.push(i);
            }
            return input;
        };
    });

    routeApp.config(function($routeProvider, $locationProvider) {

        $routeProvider.
            when('/home', { controller: HomeCtrl, templateUrl: 'partials/home.html' }).
            when('/movie/:id', { controller: BlogDetailCtrl, templateUrl: 'partials/movieDetail.html' }).
            when('/product', { controller: ProductCtrl, templateUrl: 'partials/product.html' }).                
            otherwise({ redirectTo: '/home' });

        $locationProvider.html5Mode(false);

    });

    function MainCtrl($scope) {

        $scope.navs = [
            { text: 'Products', href: '#/product' },                
        ];

    }

    function HomeCtrl($scope) {         
        console.log($scope);            
    }

    function BlogDetailCtrl($scope, $routeParams) {
        $scope.id = $routeParams.id;

        $scope.youAreClick = function(what) {
            alert('You are click on ' + what);
        }
    }

    function ProductCtrl($scope) {          
        $scope.items = [
            { grid: 3.5, filename: '360x270' },
            { grid: 3.5, filename: '260x120' },
            { grid: 3, filename: '160x120' },
            { grid: 3, filename: '260x120' },
            { grid: 3, filename: '260x120' } 
        ];          
    }

Answer 1

每次路线更改时，都会动态创建/销毁控制器。存储在其中的数据不是持久的。

克服这种情况的一种方法是使用Service。

正如文档中所述：“最后，重要的是要认识到所有Angular服务都是应用程序单例。”

Answer 2

查看Angular-Multi-View，特别是persist()方法。它允许您在路由更改中保留视图的范围。

url路由时数据消失

2 个答案: