i'm working on cordova application using ionic (with angularjs) , have hit problem. app has external links open in browser. when tap on these links taken web page, upon hitting button return app, have lost button , home button not work, rendering navigation useless. i'm not entirely sure how handle this, if leave app , re-enter navigation works fine seems when linked app itself. happens on android , on computer running files in web browser. ideally getting navigation remember , provide accurate 'back' functionality great, sending me home page useful. i've looked little routing , locations, though i'm not quite sure how fit cordova app. guidance appreciated, new angularjs.
app.js
var app = angular.module('app', ['ionic']); app.config(function ($stateprovider, $urlrouterprovider) { $stateprovider .state('tabs', { url: "/tab", abstract: true, templateurl: "templates/tabs.html" }) .state('tabs.home', { url: "/home", views: { 'home-tab': { templateurl: "templates/home.html", controller: 'hometabctrl' } } }) .state('tabs.resources', { url: "/resources", views: { 'home-tab': { templateurl: "templates/resources.html", controller: "additionalresourcesctrl" } } }) .state('tabs.gmetrics', { url: "/gmetrics", views: { 'home-tab': { templateurl: "templates/gmetrics.html", controller: "globalmetricsctrl" } } }) .state('tabs.gfeed', { url: "/gfeed", views: { 'home-tab': { templateurl: "templates/gfeed.html" } } }) .state('tabs.googleforms', { url: "/googleforms", views: { 'home-tab': { templateurl: "templates/googleforms.html" } } }) .state('tabs.social', { url: "/social", views: { 'home-tab': { templateurl: "templates/social.html", controller: "socialnetworkctrl" } } }) .state('tabs.chapters', { url: "/chapters", views: { 'home-tab': { templateurl: "templates/chapters.html" } } }); $urlrouterprovider.otherwise("/tab/home"); }); app.config(['$ionicconfigprovider', function ($ionicconfigprovider) { $ionicconfigprovider.tabs.position('bottom'); //other values: top }]); /* app.config( ['$compileprovider', function( $compileprovider ){ $compileprovider.ahrefsanitizationwhitelist(/^\s*(https?|ftp|mailto):/); }]); */ partial index.html:
<body ng-app ="app"> <ion-nav-bar class="bar-positive"> <ion-nav-back-button> </ion-nav-back-button> </ion-nav-bar> <ion-nav-view></ion-nav-view> <script id="templates/tabs.html" type="text/ng-template"> <ion-tabs class="tabs-icon-top tabs-positive"> <ion-tab title="home" icon="ion-home" href="#/tab/home"> <ion-nav-view name="home-tab"></ion-nav-view> </ion-tab> <!-- <ion-tab title="about" icon="ion-ios-information" href="#/tab/about"> <ion-nav-view name="about-tab"></ion-nav-view> </ion-tab> <ion-tab title="contact" icon="ion-ios-world" ui-sref="tabs.contact"> <ion-nav-view name="contact-tab"></ion-nav-view> </ion-tab> --> </ion-tabs> </script> <script id="templates/home.html" type="text/ng-template"> <ion-view view-title="home"> <ion-content class="padding"> <div class="list"> <a class="item item-icon-right" href="#/tab/resources"> <i class="icon ion-chevron-right"></i> additional resources </a> <a class="item item-icon-right" href="#/tab/gmetrics"> <i class="icon ion-chevron-right"></i> global metrics </a> <a class="item item-icon-right" href="#/tab/gfeed"> <i class="icon ion-chevron-right"></i> global feed </a> <a class="item item-icon-right" href="#/tab/googleforms"> <i class="icon ion-chevron-right"></i> google forms </a> <a class="item item-icon-right" href="#/tab/social"> <i class="icon ion-chevron-right"></i> social networking </a> <a class="item item-icon-right" href="#/tab/chapters"> <i class="icon ion-chevron-right"></i> chapters </a> </div> </ion-content> </ion-view> </script> <script id="templates/resources.html" type="text/ng-template"> <ion-view view-title="resources"> <ion-content class="padding"> <h1>additional resources</h1> <div class="list list-inset"> <label class="item item-input"> <i class="icon ion-search placeholder-icon"></i> <input type="text" ng-model="searchfilter" placeholder="search" /> </label> </div> <div class="item item-divider">outreach planning worksheets</div> <ion-list> <ion-item ng-repeat="item in outreachplanningworksheets | filter:searchfilter | orderby:'name'"> <a class="plainlink" ng-href="{{item.link}}">{{item.name}}</a> </ion-item> </ion-list> <div class="item item-divider">leadership</div> <ion-list> <ion-item ng-repeat="item in leadership | filter:searchfilter | orderby:'name'"> <a class="plainlink" ng-href="{{item.link}}">{{item.name}}</a> </ion-item> </ion-list> <div class="item item-divider">legal</div> <ion-list> <ion-item ng-repeat="item in legal | filter:searchfilter | orderby:'name'"> <a class="plainlink" ng-href="{{item.link}}">{{item.name}}</a> </ion-item> </ion-list> <div class="item item-divider">witnessing</div> <ion-list> <ion-item ng-repeat="item in witnessing | filter:searchfilter | orderby:'name'"> <a class="plainlink" ng-href="{{item.link}}">{{item.name}}</a> </ion-item> </ion-list> <div class="item item-divider">rallies</div> <ion-list> <ion-item ng-repeat="item in rallies | filter:searchfilter | orderby:'name'"> <a class="plainlink" ng-href="{{item.link}}">{{item.name}}</a> </ion-item> </ion-list> <div class="item item-divider">follow-up</div> <ion-list> <ion-item ng-repeat="item in followup | filter:searchfilter | orderby:'name'"> <a class="plainlink" ng-href="{{item.link}}">{{item.name}}</a> </ion-item> </ion-list> <div class="item item-divider">mobilization</div> <ion-list> <ion-item ng-repeat="item in mobilization | filter:searchfilter | orderby:'name'"> <a class="plainlink" ng-href="{{item.link}}"><h2>{{item.name}}</h2></a> </ion-item> </ion-list> </ion-content> </ion-view> </script> <script id="templates/gmetrics.html" type="text/ng-template"> <ion-view view-title="metrics"> <ion-content class="padding"> <div data-update-data> <h1>metrics</h1> <p>schools coached: {{schoolsyear}}</p> <p>gospel presentations: {{gospelpresyear}}</p> <p>gospel presentations: {{ralliesyear}}</p> <p>gospel presentations: {{receiveyear}}</p> <p>schools coached: {{schoolsalltime}}</p> <p>gospel presentations: {{gospelpresalltime}}</p> <p>gospel presentations: {{ralliesalltime}}</p> <p>gospel presentations: {{receivealltime}}</p> </div> </ion-content> </ion-view> </script>
try open external link window.open(url,'_blank'); using inappbrowser
Comments
Post a Comment