Hello
I have an app I'm creating using JQuery Mobile and AngularJS. I am able to
get the data displayed on ng-repeat for my 1st partial. However, when a
list item is click to navigate to the 2nd partial (deep linking) the 2nd
partials opens correctly, but the data from my JSON file is not displayed.
What is displayed are the directives which should be replaced by the JSON.
Thanks for any help.
*JS*var DC_ListB = angular.module("DC_ListB", []);
DC_ListB.controller("DC_ControllerB", function DC_ControllerB($scope, $http)
{
$http.get("http://explosivedesigns.net/DC-B/JS/DC_Comics_B.json";).success(function(data)
{
$scope.comicsDCB = data;
});
});
DC_ListB.controller("BatgirlController", function BatgirlController($scope,
$http, $routeParams)
{
$http.get("http://explosivedesigns.net/DC-B/JS/DC_Comics_B.json";).success(function(data)
{
$scope.comicsDCB = data;
$scope.whichItem = $routeParams.batgirlDetails;
});
});
*JS*
var myAppDCB = angular.module("myAppDCB", ["ngRoute", "DC_ListB"]);
myAppDCB.config(["$routeProvider", function($routeProvider)
{
$routeProvider.
when("DC-B/index.html",
{
templateUrl: "Partials/dc_b_list.html",
controller: "DC_ControllerB"
}).
when("DC-B/Partials/batgirl.html:batgirlDetails",
{
templateUrl: "Partials/batgirl.html",
controller: "BatgirlController"
}).
otherwise(
{
templateUrl: "Partials/dc_b_list.html",
controller: "DC_ControllerB"
});
}]);
*Partial 1*
<article data-role="content">
<div id="DC_List">
<div class="filter">
<input ng-model="query" placeholder="Filter Comic Books"
autofocus>
</div>
<ul class="ui-listview" data-role="listview" data-filter="true">
<li class="ui-first-child" ng-repeat="item in comicsDCB |
filter: query">
<a class="ui-btn ui-btn-icon-right ui-icon-carat-r"
href="http://explosivedesigns.net/DC-B/Partials/batgirl.html";
data-transition="slide">
<h1>{{item.comic}}</h1>
<h2>{{item.series}}</h2>
<p>{{item.date}}<br />{{item.writer1}}<br
/>{{item.artist}}</p>
</a>
</li>
</ul>
</div>
</article>
*Partial 2*
<div class="topBar"><img src="../Images/topBar.jpg" border="0"></div>
<div data-role="page" id="batgirl1" style="overflow-y: hidden;
background: none;" ng-model="comicsDCB">
<header class="mcMobileLogo">
<a href="#home" data-transition="slide"><img
src="../Images/musiCom_MobileLogo.png"></a>
</header>
<header data-role="header">
<div
class="comicHeader">{{comicsDCB[whichItem].comic_header}}</div>
</header>
<div class="batgirlLogoComic">
<a href="#batgirl" data-transition="slide"><img
ng-src="../Images/HomeBTN/BatgirlLogo.png" width="150" height="51"
border="0"></a>
</div>
<article>
<div class="comics"><img class="comics"
ng-src="../Images/Batgirl/{{comicsDCB[whichItem].comic_img}}.jpg"
style="border-top: 3px solid #CBA52C; border-bottom: 3px solid
#CBA52C;"></div>
<p class="condition">{{comicsDCB[whichItem].condition}}<br
/>{{comicsDCB[whichItem].cover_artist}}<br
/>{{comicsDCB[whichItem].cover_date}}</p>
</article>
<footer data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="#home" data-transition="slide"><img
src="../Images/icons-png/musicLogoIcon.png" width="18" height="20"
class="ui-icon-carat-r"></a></li>
<li><a href="#batgirl" data-transition="slide"><img
src="../Images/icons-png/BatgirlIcon.png" width="33" height="20"
class="ui-icon-carat-r"></a></li>
<li><a href="#batgirl2" data-transition="flip"><img
src="../Images/icons-png/musicLogoIcon-r.png" width="22" height="20"
class="ui-icon-carat-r"></a></li>
</ul>
</nav>
</footer>
</div>
Here's the link to the site - http://explosivedesigns.net/DC-B/index.html
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
