Error with viewing an ionic HTML page after routing through Angular JS

Question

I wrote a code for for my app, when a I click on the toggle to reach the second page, the url changes it took me there but nothing is appeared, just a blank page no more,

here is the app.js code

angular.module("BloodDonationApp", [
    "ionic",


])

.run(function ($ionicPlatform) {
    $ionicPlatform.ready(function () {
        if (window.cordova && window.cordova.plugins && window.cordova.plugins.keyboard) {
            cordova.plugins.keyboard.hidekeyboardAccessoryBar(true);
        }
        if (window.statusBar) {
            //org.apache.cordova.statusbar required
            statusbar.styleDefault();
        }
    });
})
    //****************ROUTES***************//
.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('home', {
        abstarct: true,
        url: "/home",
        templateUrl: "templates/home.html"
    })

    .state('home.feeds', {
        url: "/feeds",
        views: {
            "tab-feeds": {
                templateUrl: "templates/feeds.html"
            }
        }
    })
   .state('home.settings', {
             url: "/settings",
             views: {
                 "tab-settings": {
                     templateUrl: "templates/settings.html"
                 }
             }
         })

    .state('requestDetails', {

        url: "/RequestDetails/:id",
        view: {
            "mainContent": {
                templateUrl: "templates/requestDetails.html"

            }
        }
    })
        .state('requestDetails.ClientRegister', {
            url: "/Client-Register/:id",
            view: {
                "mainContent": {
                    templateUrl: "templates/ClientRegister.html"
                }
            }
        });

    //if name of the above states are matched, use this as the fallback
    $urlRouterProvider.otherwise('/home/feeds');
})

and here is the html code of the feeds page:

<ion-view ng-controller="FeedsCtrl as vm">
    <ion-content class="has-header">

        <div class="card" ng-repeat="requests in vm.feeds">
            <div class="item item divider" ng-click="toggleGroup(requests)"
                 ng-class="{active: isGroupShown(requests)}">
                <div class="row row-bottom">
                    <div class="col">
                        {{requests.type}}
                    </div>
                    <div class="col">
                        {{requests.unitNb}} Units
                    </div>
                </div>
            </div>
            <div class="item-accordion"
                 ng-show="isGroupShown(requests)" ng-click="goToDetails()">
                <div class="row">
                    <div class="col-top">
                        Since 7 s{{requests.Date}}
                    </div>
                    <div class="col col-center col-50 col-offset-8">
                        <br/>{{requests.HospName}}
                        <br/>
                        {{requests.Hosplocation}}
                    </div>
                    <div class="col col-bottom">
                        <a class="item item-icon-right">
                            <div class="row">
                                <i class="ion-icon ion-pinpoint "></i>
                            </div>
                            <div class="row">
                                {{requests.HospDistance}}4km
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </ion-content>
</ion-view>

and the controller for feeds:

(function () {
    'use strict';

    angular.module('BloodDonationApp')
        .controller('FeedsCtrl', ['BloodDonationApi', '$scope', '$state', FeedsCtrl]);

    function FeedsCtrl(BloodDonationApi, $scope, $state) {
        var vm = this;
        //start Data Binding functions//
        var data = BloodDonationApi.getRequests();
        console.log(data);
        vm.feeds = data;
        //end Data Binding//



        //start Accordion function//

        $scope.toggleGroup = function (requests) {
            if ($scope.isGroupShown(requests)) {
                $scope.shownGroup = null;
            } else {
                $scope.shownGroup = requests;
            }

        }

        $scope.isGroupShown = function (requests) {
            return $scope.shownGroup === requests;
        }
        $scope.goToDetails = function() {
            $state.go('requestDetails', {id : 5});
        }


        //end Accordion function//

    };
})();

but the request details is not appeared after clicking on the toggle its just give a blanck page, the html code :

<ion-view ng-controller="RequestDetailsCtrl as vm">
    <ion-content class="has-header">
        <div class="card">
            <div class="item">
                <div class="row">
                    <div class="col">
                        {{requests.type}}
                    </div>
                    <div class="col">
                        {{requests.unitNb}} Units
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        {{requests.HospName}}
                    </div>
                    <div class="col">
                        {{requests.Hosplocation}}
                    </div>
                    <div class="col">
                        4 Km Away
                    </div>
                </div>

                <button class="button button-block button-positive">
                    Yes, I donate <i class="ion-icon ion-thumbsup"></i>
                </button>
                <label>
                    4/5 <i class="ion-icon ion-battery-half"></i>
                </label>
                <div class="title">
                    <h3>
                        Last time I'd donated was since<br /> 4 months
                        <i class="ion-icon ion-checkmark-round"></i>
                    </h3>
                </div>
            </div>
        </div>
    </ion-content>
</ion-view>

the controller:

(function () {
    'use strict';

    angular.module('BloodDonationApp')
        .controller('RequestDetailsCtrl', ['BloodDonationApi', '$stateParams', '$scope', RequestDetailsCtrl]);

    function RequestDetailsCtrl(BloodDonationApi, $stateParams, $scope) {
        var vm = this;
        var data = BloodDonationApi.getRequests();
        console.log(data);
        vm.requestDetails = data;
        console.log("$stateParams", $stateParams.id);      
        //end Data Binding//
        //  Get you request
    };
})();

am sure that there is an error with the view code, but m not figuring it out, if anybody can help me plz.

no I don't use it, if u want I can give u the git link to download it — hasan shmsdn
– hasan shmsdn, Commented Nov 12, 2015 at 8:03

macrog · Accepted Answer · 2015-11-12 09:31:41Z

1

You are inside a nested state when you are tying to load requestDetails so change your state to :

  .state('requestDetails', {...})

  .state('home.requestDetails', {
      url: "/feeds/:id",
      views: {
        'tab-feeds' :{
          templateUrl: "templates/requestDetails.html"
        }
      }
    })

and your method to:

$scope.goToDetails = function() {
        $state.go('home.requestDetails', {id : 5});
    }

and It's working !

I've fork your git so updated working version is here if you want to pull

answered Nov 12, 2015 at 9:31

macrog

2,0951 gold badge23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

hasan shmsdn Over a year ago

I don't know how to pull it with the changes u fork for, u mean here that I change the feeds state to this ? I didn't understand the requestdetails state u wrote with {...}

macrog Over a year ago

check your github, not sure how can I update your master but I think you need to accept my commit

hasan shmsdn Over a year ago

yea yea done it works thnk u a lot dude... but ididnt understand why it need this if u can explain it, or if u have a reference ?

macrog Over a year ago

please have a look in this page about nested states, but basically ui-router need ui-view to render the view, while your feeds it's already a child state to home you were trying to show a requestDetails from feeds you need ui-view to display it, easiest way it's to re-use the feeds tab to show it there :) Happy to help. Let me know if you need any more help with it ?

hasan shmsdn Over a year ago

alright then, m really glad for that, thank u again, if I can have ur email thus I can ask u whenever I need some help ??

Collectives™ on Stack Overflow

Error with viewing an ionic HTML page after routing through Angular JS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related