AugularJS UI Router hat Element in dom aber leer anzeigen

Question

Ich baue eine App mit Ionic + AngularJS, mit einer Starter-App. Es ist im Grunde Tab-Ansicht + Seitenmenü. Playground here. Bisher habe ich die meisten meiner Ziele erreicht, mit Ausnahme der unter seltsamen Aktionen:

1. Wenn Sie das Element aus der Zielseite klicken, geht es zu der Ansicht, Ansicht Titel erfolgreich geändert, aber keine Inhalt angezeigt. Aber wenn Sie das Element überprüfen, war der Inhalt dort.
2. Wenn Sie auf der leeren Seite eine Aktualisierung durchführen, wird zur Zielseite zurückgesprungen. Wenn Sie auf die Elemente auf der Zielseite klicken, wird die leere Seite mit angezeigtem Inhalt geöffnet.
3. Es gibt zwei bestimmte Seiten, die weitere Fragen haben, es ist die leere Seite oben und die nächste Seite, wenn Sie auf ein Element auf der leeren Seite klicken. Wenn Sie auf diesen beiden Seiten eine Aktualisierung durchführen, springt die Seite zurück auf die Zielseite. Warum?
4. Auch wenn ich auf diesen beiden Seiten bin, ändert die untere Registerkarte nicht ihren aktiven Zustand, was bedeutet, dass Sie nicht auf die Startseite navigieren können, indem Sie auf diese beiden Seiten klicken.

Stück Code hier:

.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' 
 
     } 
 
     } 
 
    })

sieht viel zu fragen, aber ich habe hier für eine Weile stecken, wenn Sie auf diese alle Lichter vergießen konnte das würde sehr geschätzt werden.

Answer 1

Ich schlage vor, Sie Fabrik zu schaffen wie diese

.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 
    }; 
}); 

und rufen Methode, die Rückkehr versprechen wie unten

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