PLNKR: http://plnkr.co/edit/Or4JTiUrPOJUoW78c8Xd
Hey guys, I'm struggling with an issue that i was able to simplify down to the following sample:
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/items/123");
$stateProvider
.state('dashboard', {
url: "/items/:itemId",
templateUrl: 'dashboard.html',
controller: function($scope, $stateParams){
$scope.itemId = $stateParams.itemId;
},
resolve: {
itemParam: ['$stateParams', function($stateParams){
return $stateParams.itemId;
}]
}
})
.state('dashboard.history', {
parent: 'dashboard',
url: "/history",
templateUrl: 'dashboard.history.html',
controller: function($scope, itemParam){
$scope.itemId = itemParam.itemId;
}
});
})
dashboard.html
<h1>Dashboard for item {{itemId}}</h1>
<a ui-sref="dashboard.history({itemId: 123})">History</a>
dashboard.history.html
<h1>Dashboard History for item {{itemId}}</h1>
The problem is history controller isn't being called and I'm getting no errors. Can anybody explain to me what's up?
Thanks in advance!
This is because you don't have a <ui-view> directive inside your parent state:
FORKED DEMO
dashboard.html
<h1>Dashboard for item {{itemId}}</h1>
<a ui-sref="dashboard.history({itemId: 123})">History</a>
<ui-view></ui-view>
Related
I'm currently working on an app, build using Ionic. My problem is that $state.go is only working in the browser but not on the phone. This seem to be a common problem, but after reading a lot of answers to the same questions, I still can't figure out how to fix it.
The general fix seems to be to ensure you're using relative URLs as explained here: Using Angular UI-Router with Phonegap but I still can't get it to work. What am I missing?
Link to plunker: http://plnkr.co/edit/qFJ1Ld6bhKvKMkSmYQC8?p=preview
App.js structure:
....
$stateProvider
.state('parent', {
url: "/",
templateUrl: "parent.html"
})
.state('parent.child', {
url: "child",
templateUrl: "child.html"
})
$urlRouterProvider.otherwise("/")
})
....
For state.go to work you have to inject $state dependency to your controller
app.controller('ParentCtrl', ['$scope', '$state', function($scope, $state) {
$scope.$state = $state
}]);
app.controller('MenuCtrl', ['$scope', '$state', function($scope, $state){
$scope.goTo = function(){
$state.go('menu.kategorier');
}
}]);
and you have to register the state you want to goto in $stateProvider
$stateProvider
.state('menu.kategorier', {...})
and to get to that state you have to go from parent state like 'menu' in this case. you cannot change state from 'parent' to 'menu.kategorier' but you can goto 'parent.child' from 'parent'
I solved it by changing my setup for the nested views, based on this example: http://codepen.io/mhartington/pen/Bicmo
Here is my plunker, for those who are interested:
Plunker: http://plnkr.co/edit/2m5bljMntpq4P2ccLrPD?p=preview
app.js structure:
$stateProvider
.state('eventmenu', {
url: "/event",
abstract: true,
template: "<ion-nav-view name='menuContent'></ion-nav-view>"
})
.state('eventmenu.home', {
url: "/home",
views: {
'menuContent' :{
templateUrl: "home.html"
}
}
})
.state('eventmenu.home.home1', {
url: "/home1",
views: {
'inception' :{
templateUrl: "home1.html"
}
}
})
There are 2 views with respective controllers.
The links are in View1.Clicking on this link should load View2 and also read the parameters.
This is what I have tried but the alert says - undefined.
View2 can load with/without params - each case having a different workflow.
View1.html:
<div ng-controller="view1ctrl">
<a href="#/view2/pqid/775/cid/4" >Link1</a>
</div>
app.js:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/view1', {
templateUrl: 'App/views/view1.html',
controller: 'view1ctrl'
})
.when('/view2', {
templateUrl: 'App/views/view2.html',
controller: 'view2ctrl'
})
.when('/view2/:pqid/:cid', {
templateUrl: 'App/views/view2.html',
controller: 'view2ctrl'
})
.otherwise({
redirectTo: '/view1'
});
}]);
view2ctrl.js:
app.controller("view2ctrl", ['$scope','$routeParams',function ($scope, $routeParams) {
var init = function () {
alert($routeParams.pqid);
}
init();
}]);
You are nearly there:
.when('/view2/:pqid/:cid'
maps to a URL in this format :
view2/1234/4567
1234 being the pqid and 4567 the cid.
So your routing, I think is working, just change the link to #/view2/775/4.
Or if you want to keep the same link change your routing to:
#/view2/pqid/:pqid/cid/:cid
I am building an app using Ionic Framework. I am trying to move to a new view/page.html, but when I click on the list it doesn't go to the new view/page. However the URL changes. Why am I having this issue and what is the problem?
This is the Html
<a class="item item-icon-left item-icon-right" ng-click="viewCarLog()">
<i class="icon ion-model-s"></i>
Car Log
<i class="icon ion-chevron-right ion-accessory"></i>
</a>
Here is the app.js
.state('app', {
abstract: true,
url: "/app",
templateUrl: "app/layout/menu-layout.html"
})
.state('app.home', {
url: "/home",
views: {
"tab-home": {
templateUrl: "app/home/home.html"
}
}
})
.state('app.settings', {
url: "/settings",
views: {
"tab-settings": {
templateUrl: "app/settings/settings.html"
}
}
})
.state('app.car-log', {
url: "/car",
templateUrl: "app/car/car-log.html",
controller: 'CarLogCtrl'
})
.state('app.location', {
url:"/location",
templateUrl: "app/location/location.html"
})
.state('login', {
url:"/login",
templateUrl: "app/login/login.html"
});
This is the Home controller that is trying to open a new view/page
(function() {
'use strict';
angular.module('myDrive').controller('HomeCtrl', ['$state', '$scope', HomeCtrl]);
function HomeCtrl($state, $scope) {
var vm = this;
// TODO:: Getting Data from Server (WEB API)
//
$scope.viewCarLog = function() {
$state.go("app.car-log");
};
};
})();
This is a CarLogCtrl. Currently empty as it functionality of this isn't yet implemented. Am I missing something in the controller to show the view?
(function() {
'use strict';
angular.module('myDrive').controller('CarLogCtrl', ['$state', '$scope', CarLogCtrl]);
function CarLogCtrl($state, $scope) {
var vm = this;
// TODO:: Do something
};
})();
Looking for a help, and tips and guidance for this.
Found an issue with not being able to open a view. What happened was that in app.js a state needs to have a view included to display the page.
The following made it work.
.state('app.car-log', {
url: "/car",
views: {
"tab-home": {
templateUrl: "app/car/car-log.html"
}
}
})
Please correct me if I am wrong. But this worked to fix the issue I had.
I am trying to pass parameters to a state in angular.js ui-router like the following:
.state('details', {
url: '/details/:index',
templateUrl: 'views/details.html'
})
The index is being passed through an ng-repeat index
<div ng-repeat="program in programs">
<h2>{{program.name}}</h2>
<p>{{program.description || "No Description"}}</p>
<p><a ui-sref="details({index: $index})">View details ยป</a></p>
</div>
my question is how in details.html do i read the index passed in the url of the state?
Inject $stateParams in your controller.
Example.
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/route1/2")
$stateProvider
.state('route1', {
url: "/route1/:index",
templateUrl: "route1.html",
controller: function($stateParams, $scope) {
$scope.index = $stateParams.index
}
})
.state('route2', {
url: "/route2",
templateUrl: "route2.html"
})
});
Trying to link to a child URL using Angular UI-Router (very new to this)
I have:-
app.config(function($stateProvider, $urlRouterProvider, $locationProvider){
$urlRouterProvider.otherwise("/products")
$stateProvider
.state('products', {
url: "/products",
templateUrl: "products.html",
})
.state('products.edit', {
url: "/:id",
templateUrl: "products.edit.html",
controller: function ($scope, $stateParams) {
$scope.id = $stateParams.id;
console.log($stateParams.id)
}
})
.state('customers', {
url: "/customers",
templateUrl: "customers.html",
});
//$locationProvider.html5Mode(true);
});
I can navigate to products and customers, but not the products.edit state.
Here is a PLUNKER
Because products.edit is the child state of products, the view of the former is to be embedded into the view of the latter. So in products.html, you need to include a <ui-view> where ui-router will place the child view. Like this:
<div>
<h4>Products Page</h4>
<ui-view></ui-view>
</div>
See this updated plunker.