Ionic not changing views/state unless it is a tab - javascript

I have a tab bar system in my Ionic app. However I wanted to have some views that weren't apart of the tab bar and were just a sepertate page to be opened by a button.. For some reason whenever the page isn't a tab it will not open the view. I can see the URL change but it will not change to that view unless the view is also a tab as well. Hopefully that makes sense. I initially was trying to switch pages using Href, but then decided to try ng-click when href wasn't working.. here is my code below..
Where I have the state defined:
.state('tab.friendsadd', {
url: "/friendsadd",
templateUrl: "templates/friends-add.html"
})
Here is the button I had that would call the function:
<button class="button button-clear button-assertive" ng- click="changeview()">New Group</button>
and then here is my changeview() function, which I know is called correctly because the statement is printed:
$scope.changeview = function() {
console.log("hey why isnt this working");
$state.go("tab.friendsadd"); //change state
}
Not sure if this could be the issue but here is my template for the new view that I am trying to open as well:
<script id="templates/friends-add.html" type="text/ng-template">
<ion-view view-title="Sign-In">
<ion-content>
<p> Header </p>
<p> Tom brady </p>
</ion-content>
</ion-view>
</script>
Thanks for any help. I hope this is an easy fix...

try
.state('friendsadd', {
url: "/friendsadd",
templateUrl: "templates/friends-add.html"
})
and this in the html
<button class="button button-clear button-assertive" href="#/friendsadd" ui-sref="friendsadd">New Group</button>
and if your template is an actual file, then you don't need the <script></script> tags
If this won't solve it or even if it will, add some debugging to your routes
https://stackoverflow.com/a/28750792/4050230
Hope this helps..

Related

How to add a new webpage to ASP.NET MVC

Right now I am making a MVC that has a default page that loads up. From this page, the user can press a button to go to the next page. So far, I have made the first page work and a button that goes to a specified URL for the second page. The only issue I am having is making the view that I want to correspond to the second page have the correct URL.
Here is the code for my button link to the next URL
<input type="button" value="Create" onclick="location.href='#Url.Action("IndexA", "HomeController")'" />
I guess my question is how do I make my view have the specified URL that I want so it can be accessed?
I used something like this in my own project.
#if (Request.UrlReferrer != null && Request.UrlReferrer.Host == Request.Url.Host)
{
<a href="#Request.UrlReferrer" class="dbtn btn-11">
<i class="fa fa-undo"></i>
#Resources._Action_Back
</a>
}
only came from within the domain that was published I said let the button appear.
there is something like add controller in default settings controller name + controller. So just write the name there.
I had to put "home" in the URL.Action instead of "HomeController"
Please see this photo.
https://ibb.co/4SS5nYh
You add a new controller and a new view for that new page (also a model). I have called mine Test.
Then in the button. you call them with url action.
<input type="button" value="Create" onclick="location.href='#Url.Action("Index", "Test")'" />

$state.go() does not load the view (Url was changed in address field), but the view shows when second click

Use Angular JS ui.router in project.
I have added the following state map in app.js:
.state( 'confirmCart', {
url: "/cart/confirmCart",
controller: "ConfirmCartCtrl",
templateUrl: "/ng-apps/selfEnroll/pages/confirmCart/confirmCart.html"
} )
Added a function in control.js:
$scope.reviewCart = function() {
$state.go("confirmCart");
return;
}
Added a button on home page:
<div>
<button ng-click="reviewCart()">Review Cart Plans</button>
</div>
And then set the view area div use the 'ui-view' attribute.
<div class="container">
<div ui-view></div>
</div>
$state.go() does not load the view when first click this button, but the template Url was changed in browser address field.
However, the view shows when second click.
I notice that when click fist time, the view page loaded under the browser developer tool 'Network' tab. But the view page is not showing in the window.
This view has to be displayed by the second click of the button. I am confused that.
Screenshot of the developer tools shows
Try this:
$state.go("confirmCart", {}, {reload: true});
Or this:
$state.go("confirmCart").then( () => $state.reload() )

Ionic hrefs not opening in Android

I have been working on an app that uses JSON data from a server. In this JSON data there is an object that is made up of HTML, which often has an URL in it. And I also have an object that is 'just' an URL which I load into a button which should open the URL when clicked. The problem is, however, that when I click the URL's in the Ionic View app the URL's will open inside the app itself. But when I click the URL's in the standalone build on Android both these URL's don't work. What I try to accomplish is that both these URL's open in the system browser when clicked. But I can't seem to find out why this doesn't work
I do have the Cordova script in my index.html, and I also have the InAppBrowser plugin installed from Cordova.
This is the button:
<a class="button button-full button-assertive" ng-model="button" ng-click="openUrl({{vacature.url}})"> Sollicitatielink </a>
This is the function in my controllers.js:
$scope.openUrl = function(url) {
window.open(url, '_system', 'location=yes');
};
This is the HTML in the JSON data:
via our website.
I was wondering if you guys could help me with why this doesn't work. Could it be that I did not implement the plugin correctly, and if so, how could I do this properly?
Thanks in advance!
this is how I implemented the plug-in and works for me:
<button class="button button-block button-stable" ng-click="openInBrowser('https://www.google.com')">
GOOGLE
</button>
then in the JS
myApp.controller('NameCtrl', ['$scope', '$ionicPlatform', '$cordovaInAppBrowser', function($scope, $ionicPlatform, $cordovaInAppBrowser){
$scope.openInBrowser = function(extUrl){
$ionicPlatform.ready(function() {
var options = {
location: 'yes',
clearcache: 'yes',
toolbar: 'yes'
};
$cordovaInAppBrowser.open(extUrl, '_system', options)
.then(function(event) {
// success
})
.catch(function(event) {
// error
});
}); // $ionicPlatform.ready
};//--------------------------------------
}]);
I figured out why my URL's were not opening when clicking the button. This is the code I now use for it to work properly.
This is the button:
<button class="button button-full button-assertive" ng-click="openUrl('{{vacature.url}}')"> Sollicitatielink </button>
This is the function:
$scope.openUrl = function(extUrl) {
window.open(extUrl, '_system');
};
Edit
The URL's in the JSON HTML data are now working because of this code:
via our website.
Is now changed to this:
via our website.
And now all the hrefs in the Ionic app work!

AngularJS Dynamic Template containing Bootstrap Popover

I have an AngularJS app which has a dynamically added form element which contains a Bootstrap popover. When the popover is clicked, nothing pops up. I know that popovers are 'opt-in', and have included the required Javascript in my index.html file. However, the popover doesn't appear when clicking on the button in my template form. If I place the popover outside the dynamic form (in index.html), the popover will show. Any advice?
Button for Popover (index.html and phone-number.template.html):
<button type="button" class="btn btn-info" data-toggle="popover" data-trigger="focus"
title="Works outside of template!"
data-content="The popover works when not in the template form! Odd!" >
<span class ="glyphicon glyphicon-question-sign"></span>
</button>
Code to opt in (index.html):
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
relevant plnk: http://plnkr.co/edit/jpvafUhLd0RcAKfsrFWA?p=preview
Thanks, JR
You are initiating popover in document ready but it's initiating before directive load it's html. you need to initiating it on your directive load.
Add a link function put popover init there
Try like this
app.directive('phoneNumber', function(){
return {
replace:true,
scope: {
ngModel: '=',
},
templateUrl: "phone-number.template.html",
link:function($scope,element,attrs){
$('[data-toggle="popover"]').popover();
}
}
});

Dynamically updating an ng-include

This should be easy for any one who knows Angular--I, on the other hand, am super new to it. I was trying to put together an easy example using ng-include but it's not clear why the variable inside the include is not updating.
I include some html in the page (not sure if ng-model is necessary):
<div ng-model="template" ng-include="template.url"></div>
I have a button:
<a class="btn btn-lg btn-success" ng-model="template" ng-click="switch()" ng-href="#">Change!</a>
that calls a function from the controller which looks like this:
app.controller('MainCtrl', function ($scope) {
$scope.templates =
[ { name: 'Template1', url: 'views/template1.html'},
{ name: 'Template2', url: 'views/template2.html'} ];
$scope.template = $scope.templates[0];
$scope.switch = function() {
$scope.template = $scope.templates[1];
console.log($scope.template);
return $scope.template;
};
}
);
The variable that shows up in the console? Correct. But nothing changes on the page.
UPDATE: So this code works. What's required is the removal of the href attribute, which in some cases was reloading the page. If that's true, then is there a way to do this in which there is a failsafe? i.e. the href works fine without javascript, but the ng-include works when javascript is working?
It looks okay, try it in this plunkr. The only thing I changed was the URL to the templates.
Here is a fiddle also showing that it works with and without ng-href.
<a class="btn btn-lg btn-success" ng-click="switch()" ng-href="#">Change!</a>
<a class="btn btn-lg btn-success" ng-click="switch()">Change!</a>
After seeing Sunil's comment, I added in bootstrap css to make it clear that href is not needed to get the desired styling. It can be removed without any problems. But, unfortunately, plnkr and jsfiddle are not reproducing the reload you experienced.

Categories