AngularJS UI路由器在dom中有元素但显示空白

Question

我正在使用 Ionic + AngularJS 构建一个应用程序，并带有一个入门应用程序。 它基本上是标签视图+侧菜单。 Playground here. 到目前为止，我已经实现了大部分目标，除了以下奇怪的行为：

1. 当您从登录页面单击项目时，它会转到视图，视图标题已成功更改，但没有显示内容。但如果你检查元素，内容就在那里。
2. 如果对空白页进行刷新，会跳转回着陆页，然后点击着陆页上的项目，会打开空白页并显示内容。
3. 有两个特定的页面有进一步的问题，即上面提到的空白页面和单击空白页面上的项目时的下一页。这两个页面在你刷新的时候会跳回到登陆页面，为什么？
4. 此外，当我在这两个页面上时，底部选项卡不会更改它的活动状态，这意味着当您在这两个页面上时，您无法通过单击主页导航到主页。

这里有一段代码：

    .state('app.cat', {
      url: '/cat/:catname',
      views: {
        'menuContent': {
          templateUrl: 'templates/category.html',
          controller: 'CatCtrl'
        }
      }
    })

    .state('app.card', {
      url: '/cat/:catname/:cardtitle',
      views: {
        'menuContent': {
          templateUrl: 'templates/card.html',
          controller: 'CardCtrl'
        }
      }
    })

看起来有很多问题要问，但我已经在这里停留了一段时间，如果您能对此有所了解，将不胜感激。

Answer 1

我建议你创建这样的工厂

.factory('Cards', function($q) {
    // Might use a resource here that returns a JSON array

    // Some fake testing data
    var cards = [{
        "categories": [{
            "catid": "1",
            "catname": "Test 1",
            "catbanner":"//placehold.it/300x100?test-1",
            "cards": [{
                "id":"11","title": "Cat 1 Cards 1","cover":"img/list-1.jpg"
            }, {
                "id":"12","title": "Cat 1 Cards 2","cover":"img/list-2.jpg"
            }]
        }, {
            "catid": "1",
            "catname": "Test 2",
            "catbanner":"//placehold.it/300x100?test-2",
            "cards": [{
                "id":"11","title": "Cat 1 Cards 1","cover":"11"
            }, {
                "id":"12","title": "Cat 1 Cards 1","cover":"12"
            }]
        }, {
            "catid": "1",
            "catname": "Test 3",
            "catbanner":"//placehold.it/300x100?test-3",
            "cards": [{
                "id":"11","title": "Cat 1 Cards 1","cover":"11"
            }, {
                "id":"12","title": "Cat 1 Cards 1","cover":"12"
            }]
        }, {
            "catid": "1",
            "catname": "Test 4",
            "catbanner":"//placehold.it/300x100?test-4",
            "cards": [{
                "id":"11","title": "Cat 1 Cards 1","cover":"11"
            }, {
                "id":"12","title": "Cat 1 Cards 1","cover":"12"
            }]
        }, {
            "catid": "1",
            "catname": "Test 5",
            "catbanner":"//placehold.it/300x100?test-5",
            "cards": [{
                "id":"11","title": "Cat 1 Cards 1","cover":"11"
            }, {
                "id":"12","title": "Cat 1 Cards 1","cover":"12"
            }]
        }, {
            "catid": "2",
            "catname": "Test 6",
            "catbanner":"//placehold.it/300x100?test-6",
            "cards": [{
                "id":"21","title": "Cat 1 Cards 1","cover":"21"
            }]
        }]
    }];
    var deferred = $q.defer();
    var _cat = []
    var _remove =  function(card) {      cards.splice(cards.indexOf(card), 1);    }
    var _getCat =  function(catname) {
        var array = [];
        for (var i = 0; i < cards[0].categories.length; i++) {
            if (cards[0].categories[i].catname === catname) {
                array.push(cards[0].categories[i]);            
            }
        }
        angular.copy(array, _cat);
        return deferred.promise;
    }
    var _getCard = function(catname, cardtitle) {
        var array = [];
        for (var i = 0; i < cards[0].categories.length; i++) {
            if (cards[0].categories[i].catname === catname) {
                for (var k = 0; i < cards[0].categories[i].cards.length; k++) {
                    if (cards[0].categories[i].cards[k].title === cardtitle) {
                        array.push(cards[0].categories[i].cards[k]);
                    }}
                array.push(cards[0].categories[i]);
            }
        }
        angular.copy(array, _cards);
        return deferred.promise;
    }

    return {
        all: function() {   return cards;   },
        remove:_remove,
        getCat:_getCat,
        getCard:_getCard,
        cat: _cat,
        cards: _cards
    };
});

并调用返回 promise 的方法，如下所示

 Cards.getCat($stateParams.catname).then(function () { $scope.cat = Cards.cat}, function () { alert("Error") });