0

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

所以数据是从谷歌电子表格中获取的，并使用角度进行路由，但是当路由到另一个页面并返回后数据消失了

这是它的一个Plunker

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

桌面控制器

  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' } 
        ];          
    }
4

2 回答 2

1

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

克服这个问题的一种方法是使用Service。

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

于 2013-08-27T13:00:30.213 回答
0
于 2013-08-27T13:32:59.733 回答