In my Ionic app, I want to pass parameter(s) from one sub-view to another sub-view. When I pass parameters first time, It works as I expected, but my problem is, when I return first sub-view and then go to another sub-view, it goes to that page without parameters. My code is given below:
index.html (project/www)
<!DOCTYPE html>
<html>
<head>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/main.js"></script>
<script src="js/routes.js"></script>
</head>
<body ng-app="app" animation="slide-left-right-ios7" >
<!-- main window -->
<div>
<ion-nav-view></ion-nav-view>
</div>
</body>
</html>
route.js (www/js/route.js)
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('mainUser', { // first window
url: '/mainuser',
templateUrl: 'templates/mainUser.html',
controller: 'mainCtrl'
})
.state('userDrive', { // second window
url: '/user_drive',
params: {
driveData: null // parameter send
},
templateUrl: 'templates/user_drive.html',
controller: 'DriveCtrl'
});
$urlRouterProvider.otherwise('/mainUser');
});
templates/mainUser.html
<ion-side-menus>
<ion-side-menu-content>
<ion-content class="padding" style="background-color:#fff;">
<input type="date" ng-model="selectData.selectedDate" placeholder="Date">
<input type="time" ng-model="selectData.selectedTime" placeholder="Time">
</ion-content>
<div class="bar bar-footer">
<div class="button-bar">
<a ui-sref="userDrive({ driveData: selectData })" class="button"> Drive </a>
</div>
</div>
</ion-side-menu-content>
</ion-side-menus>
Here after click on Drive button, it will redirect to userDrive sub-view with parameter driveData correctly. But where I back to mainUser and then change selectData.selectedDate and selectData.selectedTime and then click again on Drive button, it will redirect to userDrive sub-view without driveData parameter.
userDrive Controller
.controller('DriveCtrl', function($scope, $state, $stateParams) {
console.log("DriveCtrl"); // after redirect to this controller second time
// it also print no value
// seems might be DriveCtrl is not called
console.log("$stateParams : ", $stateParams);
})
The problem is that the view is cached by Ionic, and in that case the controller gets executed only once, so that's why you only see the log the first time.
You need to use ionic view events, here the docs: http://ionicframework.com/docs/api/directive/ionView/
#leandro-zubrezki is right. To remove cache you can add anywhere in the controller 'DriveCtrl'.
$scope.$on("$ionicView.afterLeave", function () {
$ionicHistory.clearCache();
});
U can't send object into state param, if u need to send each value separately
Related
angular.module('BeautyCare', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html"
})
.state('tabs.Store', {
url: "/Store",
views: {
'Store-tab': {
templateUrl: "templates/Store.html",
controller: 'StoreTabCtrl'
}
}
})
.state('tabs.SalonGalary', {
url: "/SalonGalary",
views: {
'SalonGalary-tab': {
templateUrl: "templates/SalonGalary.html",
controller :'SalonGalaryCtrl'
}
}
})
.state('tabs.Profile', {
url: "/Profile",
views: {
'Profile-tab': {
templateUrl: "templates/Profile.html"
}
}
})
.state('tabs.Alerts', {
url: "/Alerts",
views: {
'Alerts-tab': {
templateUrl: "templates/Alerts.html"
}
}
});
$urlRouterProvider.otherwise("/tab/Store");
});
.controller('StoreTabCtrl', function($scope,$http,$log) {
var items =null;
$log.debug('start debug');
var url="http://open.api.ebay.com/shopping?GLOBAL-ID=EBAY-IN&QueryKeywords=Iphone&ResponseEncodingType=JSON";
url+="&appid=API_ID&callback=JSON_CALLBACK._0";
url+="&callname=FindPopularItems&version=713?callback=JSON_CALLBACK";
$log.debug($http.jsonp(url)
.success(function(data) {
items=data;
console.log(items);
})
.error(function(data) {
//alert("ERROR");
}));
});
<html >
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Beauty Care</title>
<!-- MyBeauty , BeautyCare,BeautyEye,BeautyShop,BeautySalon !-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/app.js"></script>
<script src="js/Service.js"></script>
<script src="js/Controllers.js"></script>
<!-- <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBLSOMXsw_sxOlRpyBj16g5iaewLHDpSes&libraries=places"></script>
-->
</head>
<body ng-app="BeautyCare">
<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="" icon="ion-ios-cart" href="#/tab/Store">
<ion-nav-view name="Store-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="" icon="ion-navicon-round" href="#/tab/SalonGalary">
<ion-nav-view name="SalonGalary-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="" icon="ion-android-person" ui-sref="tabs.Profile">
<ion-nav-view name="Profile-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="" icon="ion-ios-bell" ui-sref="tabs.Alerts">
<ion-nav-view name="Alerts-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="templates/Store.html" type="text/ng-template">
<ion-view view-title="BeautyCare Store" cache-view="false">
<ion-content class="padding" >
<ion-list>
<ion-item class="item-icon-right" ng-repeat="item in items">
<h1>{{item.TimeStamp }}</h1>
<!--<p>{{ item.title}}</p> !-->
<i class="icon ion-chevron-left icon-accessory"></i>
<ion-option-button class="button-positive" ng-click="viewFriend(viewFriend(data.idfriends))">View Friend</ion-option-button>
<ion-option-button class="button-assertive" ng-click="deleteFriend(remove(data.idfriends))">Delete</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
<script id="templates/SalonGalary.html" type="text/ng-template">
<ion-view view-title="BeautyCare Salon Galary" cache-view="false">
<ion-content class="padding">
</ion-content>
</ion-view>
</script>
<script id="templates/Profile.html" type="text/ng-template">
<ion-view title="My Profile" cache-view="false">
<ion-content>
</ion-content>
</ion-view>
</script>
<script id="templates/Alerts.html" type="text/ng-template">
<ion-view view-title="My Alerts" cache-view="false">
<ion-content class="padding">
</ion-content>
</ion-view>
</script>
</body>
</html>
</body>
</html>
I tried to use $http.get with no luck , the code showing unexpected error.
i appreciate any help to solve this issue or workaround to use $http.get . I tried different examples but still not getting issues solved. Thanks in advance
Let's take a closer look at the URL you are attempting to send to the eBay API:
http://open.api.ebay.com/shopping?GLOBAL-ID=EBAY-IN&QueryKeywords=Iphone&
ResponseEncodingType=JSON&appid=Mawsem77f-2832-4be9-93d8-e257a245be3&
callback=JSON_CALLBACK._0&callname=FindPopularItems&version=713?callback=JSON_CALLBACK
I counted three problems with this:
the version parameter has an invalid value: 713?callback=JSON_CALLBACK. This parameter appears to require a numeric value. Note that this part of the URL is already in the query string, so the ? here won't be interpreted as the start of the query string or as an argument separator.
If callback=JSON_CALLBACK at the end of the URL is supposed to be another URL parameter name and value, then you have specified the callback parameter with two different values. You only need to specify this parameter once, and you also need to make up your mind about which value to use.
As you are making a JSONP request you need to specify the name of a function to wrap the returned JSON in. However, according to the eBay API documentation, you are using the wrong parameter for the name of the callback function. If the parameter callback has the value true, the response will be wrapped in a call to a function named _cb_FindPopularItems. Other values for this parameter appear to be ignored. It seems you want to use the callbackname parameter instead. So, try removing both callback parameters from your URL and adding either callbackname=JSON_CALLBACK or callbackname=JSON_CALLBACK._0 (it's not clear which one you intend here).
This also explains the syntax error: responses to JSONP requests are assumed to be executable JavaScript but the response you are getting is actually some JSON data.
I have not tested this, but I would hope the following URL (wrapped for readability) would work. You may need to add the ._0 suffix to the callback name:
http://open.api.ebay.com/shopping?GLOBAL-ID=EBAY-IN&QueryKeywords=Iphone&
ResponseEncodingType=JSON&appid=Mawsem77f-2832-4be9-93d8-e257a245be3&
callbackname=JSON_CALLBACK&callname=FindPopularItems&version=713
Finally, please consider changing your eBay app ID. You've now posted it on the public internet and anyone who views this question can now use it. I've never used eBay nor its API before, so I'll leave it up to you to figure out how to do this.
I am using "prettyprint" along with "AngularJs" which is working very well, but only issue is if I use routing, then the prettyprint function is not working (as it might have been configured to run on pageLoad). Now, what if I am going to various ng-view pages and coming back? How to run the prettyprint function even on route change?
HTML:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/google/code-prettify/master/styles/sons-of-obsidian.css">
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.1/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
One
Two
Three
<div ng-view=""></div>
<script>
//App Declaration
var app = angular.module('myApp', ['ngRoute'] );
//Controllers
app.controller('myCtrl', function($scope) {
});
//Routers
app.config(function($routeProvider){
$routeProvider
.when('/one', {
templateUrl: 'one.html'
})
.when('/two', {
templateUrl: 'two.html'
})
.when('/three', {
templateUrl: 'three.html'
})
.otherwise({
redirectTo: '/one'
});
});
</script>
</body>
</html>
one.html
This is one
<pre class="prettyprint">
<div>
<p>
<a href="http://www.google.com">Google</a>
</p>
</div>
</pre>
two.html
This is two
Image on first time clicking 'one' link:
Going to 2nd view or 3rd view and then coming back:
Can someone help me out please?
For some reason I cannot retrieve the data from my controllers scope variables in my views. All of my views use the same controller, so I am not sure what went wrong. Any help would be appreciated.
Here is my App.js
var app = angular.module('app', [
'ngRoute'
]);
// Route configurations
app.config(['$routeProvider', function ($routeProvider){
$routeProvider.when('/', {
templateUrl: 'partials/home.html',
controller: 'MainController'
})
.when('/countries', {
templateUrl: 'partials/countriesList.html',
controller: 'MainController'
})
.when('/details', {
templateUrl: 'partials/countryDetails.html',
controller: 'MainController'
})
.otherwise({
redirectTo: '/'
});
}]);
// Main Controller Setup
app.controller('MainController', ['$scope', MainController]);
function MainController ($scope){
$scope.hello = 'hello';
}
Here is one of the view I am trying to access the scope in:
<h1>Country List</h1>
<button class="btn">Countries Details</button>
<p>hello: {{hello}}</p>
Here is my index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Countries and Capitals</title>
<link rel="stylesheet" type="text/css" href="css/vendor/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body ng-controller="MainController" ng-cloak>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<ng-view></ng-view>
</div>
</div>
</div>
<script src="js/vendors.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>
The problem because of nested scopes. The better way use some nested scopes is use controllerAs method. Could you try:
```
<body ng-controller="MainController as myctrl" ng-cloak>
<p>hello: {{myctrl.hello}}</p>
```
What you do while adding a controller in ng-route is you create another scope of the same controller. My suggestion is you use either no controller i.e. remove controller attribute or add $parent. in the view you are referencing.
The first one is preferred if u want to have same scope over a set of pages, the second one is preferred when u have different controllers for different pages.
Along with that if u want to access global variables, u can add them to $rootScope and access them globally..
Hope this helps
Having an issue using the ng-view to render a template from my controller.
The index.html file is initially served to the client and looks like.
<!doctype html>
<html lang="en" ng-app="hlmApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title></title>
<link rel="stylesheet" href="#Model.Root.Resource/bower_components\\/bootstrap/dist/css/bootstrap.css">
#RenderSection("BootScript")
<!-- app.js will load the angular module -->
<script src="#Model.Root.Resource/bower_components/angular/angular.js"></script>
<script src="#Model.Root.Resource/bower_components/angular-route/angular-route.js"></script>
<script src="#Model.Root.Resource/app/app.js"></script>
<script src="#Model.Root.Resource/app/controllers/controllers.js"></script>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>A link here</li>
</ul>
</div>
</div>
<div ng-view></div>
#*<div ng-controller="tempController">{{Heading}}</div>*#
</div>
#RenderBody()
</body>
</html>
the server pushes down my app.js and controllers.js file along with the deps.
/// ap.js ///
var hlmApp = angular.module('hlmApp', ['ngRoute', 'MyTempControllers']);
hlmApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/Holdings', {
templateUrl: 'templates/temp.html',
controller: 'controllers/tempController'
});
}]);
the controller is pretty simple and is as follows
var MyTempControllers = angular.module('MyTempControllers', []);
MyTempControllers.controller('tempController', ['$scope', function () {
console.log("stuff happening");
$scope.Heading = "Hello World";
}]);
then the html template is as follows
<div>
<h3>{{Heading}}</h3>
</div>
When I use the ng-view nothing ever renders. the controller is never triggered in the debugger. If I specifically call out the controller via the ng-controller then everything shows up. can someone point out my error here?
You need these 3 changes:
1) add $scope as a parameter in your controller function
MyTempControllers.controller('tempController', ['$scope', function ($scope) {
...
}]);
2.
Change
controller: 'controllers/tempController'
to
controller: 'tempController'
FYI, the naming convention for a controller is to begin with a capital letter for Controller.
3. In addition, you should add a
.otherwise({
template: templates/temp.html,
controller: 'tempController'
});
so that when no route matches, it goes to default-page-name.html. This is what's happening in your case, when you first load the page, no route matches. If you want to see temp.html, you have to 1) either click on a link that goes to #/Holdings, or 2) use '/Holdings' as the "otherwise" route, as indicated above.
Try this:
hlmApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/Holdings', {
templateUrl: 'templates/temp.html',
controller: 'tempController' // just the name
});
}]);
and also $scope is missing in parameters:
MyTempControllers.controller('tempController', ['$scope', function ($scope) {
console.log("stuff happening");
$scope.Heading = "Hello World";
}]);
I have just gotten started with AngularJS (coming from jQuery) and it seems worthwhile to replace a majority of my jQuery.
I decided that the easiest place to start was all the simple show / hide tabbed content I have. Currently, I have all the applicable html within the page that loads. However, it seems like I'd be better off loading the entirety of these tabbed sections using Angular routes. Am I correct in that assumption? Or should I use some hybrid approach (the content within these sections is dynamic)?
Anyway, with the Angular solution, I cannot seem to get the script to work for routes. I am in very new territory with this and am clueless as to where I am going wrong. Any help is grea
My currently HTML (simplified):
<!DOCTYPE html>
<html data-ng-app='mainApp'>
<head>
<script src='js/jquery.min.js'></script>
<script src='js/angular.min.js'></script>
</head>
<body>
<div class='toggleButtons'>
<a href='#/info'>
<div></div>
</a>
<a href='#/comment'>
<div></div>
</a>
<a href='#/feedback'>
<div></div>
</a>
</div>
<div class='container'>
<div data-ng-view=''></div>
</div>
<script src='app/main.app.js'></script>
</body>
</html>
Angular:
/// <reference path="../js/angular.min.js" />
var mainApp = angular.module('mainApp', []);
mainApp.config(function ($routeProvider) {
$routeProvider
.when('/info',
{
controller: 'mainInfoController',
templateUrl: '/app/partials/info.html'
})
.when('/comment',
{
controller: 'mainCommentController',
templateUrl: '/app/partials/comment.html'
})
.when('/feedback',
{
controller: 'mainFeedbackController',
templateUrl: '/app/partials/feedback.html'
})
.otherwise({ redirectTo: '/app/partials/info.html' });
});
Just to note: the controllers above are just placeholders really. I have not created them yet. However, I don't care if they work or not now. I am just concerned with getting the partial view routes to show up. They aren't though. Clicking the links does properly show page.html#/info (or comment or feedback... etc.). But nothing happens.
Also file path is as follows:
main folder = html
js = scripts
app = angular files (app.js / module files here)
views
partials
controllers
services
What am I doing wrong?
<!DOCTYPE html>
<html ng-app='mainApp'>
<head>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js'></script>
<script>
var mainApp = angular.module('mainApp', []);
mainApp.config(function($routeProvider) {
$routeProvider
.when('/info', {
controller: 'mainInfoController',
templateUrl: 'app/partials/info.html'
})
.when('/comment', {
controller: 'mainCommentController',
templateUrl: 'app/partials/comment.html'
})
.when('/feedback', {
controller: 'mainFeedbackController',
templateUrl: 'app/partials/feedback.html'
})
.otherwise({
redirectTo: '/info'
});
function mainInfoController($scope) {}
function mainCommentController($scope) {}
function mainFeedbackController($scope) {}
});
</script>
</head>
<body>
<div class='toggleButtons'>
<a href='#/info'>
<div>Info</div>
</a>
<a href='#/comment'>
<div>Comment</div>
</a>
<a href='#/feedback'>
<div>Feedback</div>
</a>
</div>
<div ng-view></div>
</body>
</html>