Im trying to create a dynamic UI router when everytime you click a button it needs to return the templateUrl with the $stateParams.currentFloor changes only so it can get updated in the view on the screen.
Currently I have:
My setup:
app.config(function ($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
views: {
"menu-view": {
templateUrl: 'partials/menu.html'
},
"map-view": {
controller: 'mapViewController',
templateUrl: function ($stateParams) {
return 'partials/floors/floor-' + $stateParams.currentFloor + '.html'
}
}
}
})
});
My controller what needs to hold the data and pass it in the templateUrl function
app.controller('mapViewController', function ($scope, $stateParams) {
$scope.currentFloor = $stateParams.currentFloor;
$scope.currentFloor = 1;
$scope.addOne = function () {
$scope.currentFloor = $scope.currentFloor + 1;
return $stateParams.currentFloor = $scope.currentFloor;
};
});
And just simple a function what adds +1 to the scope everytime on a click
<button ng-click="addOne()"></button>
I think I'm pretty close but I have a hard time passing the data from my controller to the function what needs to change the templateUrl
Check the updated plunker here
One possible solution :
var app = angular.module('testTool', ['ui.router'])
.config(function($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/1');
$stateProvider
.state('home', {
url: '/:currentFloor',
views: {
"menu-view": {
templateUrl: 'menu.html'
},
"map-view": {
templateUrl: function ($stateParams) {
return 'floor-' + $stateParams.currentFloor + '.html'
},
controller: 'mapViewController'
},
}
})
})
.controller('mapViewController', function($scope, $stateParams, $state) {
$scope.addOne = function() {
$state.go('home', {currentFloor : parseInt($stateParams.currentFloor) + 1}, {reload: true})
};
});
Add param 'currentFloor in url params (url:'/:currentFloor'). Then reload state with this params : $state.go('home', {currentFloor : 2}, {reload: true})
Option reload:true is important for ui router reload the state when your are on the same state.
I suggest you to use resolve function if you need to do some work between $stateParams and object in your scope.
Try to add $state.go($state.current, {}, {reload: true}) after changing $stateParams.
Related
I have a state as such:
.state('home.deletemsg', {
views: {
"contentworker#": {
url: '/delete/:entityname/:id/:redirectstate',
templateUrl: "Scripts/proteanapp/templates/delete.html",
controller: 'deletectrl',
controllerAs: 'del',
authenticate: true
}
}
Then in the controller I have:
return app.controller('deletectrl', ['$scope', '$rootScope', '$stateParams', function ($scope, $rootScope, $stateParams) {
debugger;
// check for ui router error
var del = this;
del.entityname = $stateParams.entityname;
del.entityid = $stateParams.id;
}]);
Calling $state.go from a controller like :
$state.go('home.deletemsg', { 'entityname': cd.Customer.Name, 'id': cd.Customer.CustomerID }, { 'location': false, 'notify': true });
But the $stateParams is empty, I don't understand why it is empty. I have tried putting an params object into the state and also resolve.
$stateParams.entityname //undefined
$stateParams.id //undefined
url option should be present there on state definition directly, not inside views object of state. But even your controller should not have been called the way you have configured your state.
Code
.state('home.deletemsg', {
//url should present here, rather than putting it inside `views`
url: '/delete/:entityname/:id/:redirectstate',
views: {
"contentworker#": {
templateUrl: "Scripts/proteanapp/templates/delete.html",
controller: 'deletectrl',
controllerAs: 'del',
authenticate: true
}
}
I'm working on passing parameters in a url. As far as I know everything is setup correct to set the baseFilter url parameter with the vm.all property but every time I click the link nothing happens. I also inspected the generated html and I see a ui-sref and not a href tag. Any help is appreciated
router.js
(function () {
'use strict';
angular.module('app').config(routing);
/* #ngInject */
function routing($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home/home.html',
controller: 'HomeContentController as vm'
})
.state('eventsList', {
url: '/eventsList/:baseFilter',
templateUrl: 'events-list/events-list.html',
controller: 'EventsListController as vm'
});
$urlRouterProvider.otherwise('/home');
}
})();
This is the a tag in my home.html
<a class="item" ui-sref="eventsList({baseFilter: vm.all})">
HomeController.js
(function () {
'use strict';
angular.module('app').controller('HomeContentController', HomeContentController);
/* #ngInject */
function HomeContentController($scope, $log, $ionicSideMenuDelegate, $ionicPopup, $state, rxEventsService, rxRequests, $cordovaGeolocation) {
// Assign variable `vm` to `this` to reflect that this is a view-model.
var vm = this;
vm.all = "all";
// Bindable Properties
vm.promptUnavailable = promptUnavailable;
// Controller Initialization
function init() {
console.log('init HomeContentController');
}
init();
// Bindable Events
function promptUnavailable(feature) {
$ionicPopup.alert({
title: 'Unavailable Feature',
template: feature + ' is unavailable in this Alpha release'
});
}
}
})();
If you set the correct value of vm.all your code should work fine.
angular
.module('app', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'home.html',
controller: 'HomeContentController as vm'
})
.state('eventsList', {
url: '/eventsList/:baseFilter',
templateUrl: 'events-list.html',
controller: 'EventsListController as vm'
});
$urlRouterProvider.otherwise('/home');
})
.controller('HomeContentController', function () {
var vm = this;
vm.all = 1;
})
.controller('EventsListController', function ($stateParams) {
var vm = this;
console.log($stateParams);
});
I have created a JSBin using your code and it works fine. If you see the value logged in console log, it has correct value of $stateParams. https://jsbin.com/qebimeh/1/edit?html,js,console,output
I try to create an app with angular, and somehow the child state in not loading.
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url : "/",
templateUrl: "/admin/home/"
})
.state('users', {
url : "/users/",
templateUrl: "/admin/users",
controller : function ($stateParams) {
console.log($stateParams);
console.log("users");
}
})
.state('users.new', {
url : "^/users/user/",
templateUrl: "/admin/users/new",
controller : function () {
console.log("users.new");
}
})
.state('users.user', {
url : "^/users/user/:uuid",
templateUrl: function ($stateParams) {
console.log($stateParams);
return "/admin/users/" + $stateParams.uuid
},
controller : function () {
console.log("users.user");
}
});
When I visiting the page
/users/user/55d8b1c706387b11480d60c1
I see the request to load the page, but only the "users" controller got executed.
This problem appears only with child states, switching between parent state working without problems.
I Using the latest versions of angular and ui-routes.
any ideas?
Please read this DOC
You mistake is in hierarchy. Child states use parent template as root and try find nested <ui-view>
You may add abstract state user without url, with empty template <ui-view></ui-view>, for nested viws. Then rename user, to E.G. user.index, it works for me
1st (It may works)
$stateProvider
.state('home', {
url : "/",
templateUrl: "/admin/home/"
})
.state('users', {
template: "<ui-view></ui-view>",
})
.state('users.index', {
url : "/users/",
templateUrl: "/admin/users",
controller : function ($stateParams) {
console.log($stateParams);
console.log("users");
}
})
.state('users.new', {
url : "^/users/user/",
templateUrl: "/admin/users/new",
controller : function () {
console.log("users.new");
}
})
.state('users.user', {
url : "^/users/user/:uuid",
templateUrl: function ($stateParams) {
console.log($stateParams);
return "/admin/users/" + $stateParams.uuid
},
controller : function () {
console.log("users.user");
}
});
2nd way is USE absulutly named views E.G.
views: {
"": { templateUrl: 'pages/menu.html' }, // relative noName view
"header": { templateUrl: "pages/header.html"}, //relative named view
"content#": { // Absolute name
template: "<ui-view></ui-view>",
controller: 'AuthController'}
}
I am having weird issue probably caching issue while navigating from grand-child(/dashboard/1/production) to parent(/dashboard).
Following are few screenshots:
The selections i.e Delphi-UI and production shouldn't persists.
Following is my snippet of application config:
$stateProvider
.state('root', {
url: '/',
views: {
'header': {
templateUrl: 'ngapp/templates/header.html'
}
}
})
// dashboard routes
.state('root.dashboard', {
url: 'dashboard',
views: {
'content#' : {
templateUrl: 'ngapp/home/templates/dashboard.html',
controller: 'DashboardCtrl',
controllerAs: 'vm'
}
}
})
.state('root.dashboard.app', {
url: '/{id:int}',
views: {
'body#root.dashboard' : {
templateUrl: 'ngapp/home/templates/dashboard-body.html',
controller: 'DashboardBodyCtrl'
}
}
})
.state('root.dashboard.app.env', {
url: '/:name',
views: {
'body#root.dashboard' : {
templateUrl: 'ngapp/home/templates/env-content.html',
controller: 'EnvContentCtrl'
}
}
});
And DashboardCtrl is:
controllers.controller('DashboardCtrl', ['$scope', '$http', '$state', '$timeout', 'appsFactory', function($scope, $http, $state, $timeout, appsFactory) {
$scope.envs = [];
$scope.deps = [];
$scope.envBtnText = $scope.appBtnText = "Choose here";
$scope.headerTitle = "Environment Configuration And Management";
$scope.appStatus = {
isopen: false
};
$scope.envStatus = {
isopen: false
};
appsFactory.list(function(data) {
$scope.apps = data;
});
}]);
Full controller code : http://goo.gl/BWtiU5
Project hosted here : https://github.com/budhrg/atlantis-dashboard
Also, navigating back to Atlantis UI(dashboard) doesn't reset data like
$scope.envs, $scope.deps, $scope.envBtnText and $scope.appBtnText.
What might be issue here? Am I missing anything?
Nested States & Views
When the application is in a particular state—when a state is "active"—all of its ancestor states are implicitly active as well. Below, when the "contacts.list" state is active, the "contacts" state is implicitly active as well, because it's the parent state to "contacts.list".
Your controller isn't getting re-instantiated (expected). There are a couple ways to handle this.
See:
How to make angular ui-router's parent state always execute controller code when state changes?
I'm trying to open a modal with angularjs.
My route to task list is:
/client/:id/task/list
Its working fine.
Now, i'm trying to show the task info in a modal, above the list.
My route for this is:
/client/:id/task/:id
How can i open the modal above the list view, change the URL, but don't change the view?
I saw a lot of topics about this, but with none solution.
Thanks.
You can specify states you want to show as modal and when handled, return to state you want to. For example;
app.config(function ($stateProvider) {
$stateProvider.state('tasks', {
url: '/tasks',
templateUrl: 'tasks.html',
controller: 'TasksCtrl'
}).state("tasks.show", {
url: "/tasks/:id",
onEnter: function($stateParams, $state, $modal) {
$modal.open({
templateUrl: "show.html",
resolve: {},
controller: function($scope, $state) {
$scope.ok = function () {
$scope.$close();
};
$scope.dismiss = function () {
$scope.$dismiss();
};
}
}).result.then(function (result) {
// $scope.$close
}, function (result) {
// $scope.$dismiss
}).finally(function () {
// finally
return $state.transitionTo("tasks");
});
}
});
});
Related plunker here http://plnkr.co/edit/fCyrlH