We Keep Coding

$location.path change url but no redirecting

I want to redirect to another page by clicking a button, but when I click on a button, URL is changed, but it is not redirected, I have to refresh the page with new URL. The same is also happening when I click on link.
locationController.js
angular.module('reservationModule').controller('locationController', function($scope, $location){
$scope.setLocation = function (url) {
$location.path(url);
};
})
reservationModule.js
(function () {
var resModule = angular.module('reservationModule', ['ngRoute']);
resModule.controller('HomeController', function ($scope) { // here $scope is used for share data between view and controller
$scope.Message = "Yahoooo! we have successfully done our first part.";
});
resModule.config(function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '/Home/Index.cshtml',
controller: 'locationController'
})
.when('/Home/Index', {
templateUrl: '/Home/Index.cshtml',
controller: 'locationController'
})
.when('/Home/Registration', {
templateUrl: '/Home/Registration.cshtml',
controller: 'registerController'
})
.when('/Home/Login', {
templateUrl: '/Home/Login.cshtml',
controller: 'loginController'
})
.otherwise({ redirectTo: '/' });
});
})();
Index.cshtml
#{
// Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Webový rezervační systém";
}
<base href="/">
<div class="container" ng-controller="locationController">
<header class="header">
<div class="headerleft">
<div class="headerlogo">
<img alt="reservation" src="../Content/pics/vetstoria-logo.jpg" width="50" height="50">
</div>
</div>
<div class="headerright">
<p class="headerlogintext">
<a class="btn headerlogin" href="/Home/Login" style="text-decoration:none">Přihlašte se</a>
</p>
</div>
</header>
<div class="content">
<h1 class="content-title">Webový rezervační systém</h1>
<p class="content-title-text">V našem rezervačním systému se můžete rezervovat na cokoliv chcete. Ať už si chcete rezervovat sportoviště, nějaký kurz nebo jiné, u nás to jde snadno.</p>
<p class="content-title-text">Pro začátek vám stačí jediné.</p>
<button class="btn-big" ng-click="setLocation('/Home/Registration')">Registrovat</button>
</div>
<!-- <ul class="menuUl">
<li>#Html.ActionLink("Register", "Registration")</li>
</ul>-->
#section Scripts{
<script src="~/Scripts/Angular_Controllers/locationController.js"></script>
}
I read some topics about this, but I don't know, if an error is in the module, or in the controller.

I had a similar issue. The template url should point to ".html" rather than ".cshtml". When you try to access files inside the Default Folders created by Visual Studio, for some reason you cannot access it. So try changing your path.

Ui-sref doesn't work when I click on them

I have a html file
<div class="list">
<a ui-sref="sideMenu.settings.profileSettings" class="item item-icon-left">
<i class="icon ion-email"></i></a>
User Profile
</a>
<a ui-sref="sideMenu.settings.profileSettings" class="item item-icon-left">
<i class="icon ion-email"></i>
Vehicle
</a>
</div>
and a js file
.state('sideMenu.settings.profileSettings', {
url: "/profileSettings",
templateUrl: "templates/Settings/profileSettings.html",
controller: 'profileSettingsController'
})
Now whenever I click on the state. It updates the url. It means it's executing but it doesn't update the view. I have beem scratching my head but can't seem to figure out what the problem is.

There is a working plunker. Not fully sure what is not working, because there are now really many resources and Q & A here revealing the mystery of the UI-Router... but ok
I used your states like this:
.state('sideMenu', {
url: "",
template: '<div ui-view></div>',
})
.state('sideMenu.settings', {
url: "",
template: '<div ui-view></div>',
})
.state('sideMenu.settings.profileSettings', {
url: "/profileSettings",
templateUrl: "templates/Settings/profileSettings.html",
controller: 'profileSettingsController'
})
.state('sideMenu.settings.vehicle', {
url: "/vehicle",
templateUrl: "tpl.html",
})
As we can see, I just showed the parents and added one another state vehicle.
And with the index.html like that:
<div class="list">
<a ui-sref="sideMenu.settings.profileSettings" class="item item-icon-left">
<i class="icon ion-email"></i>
User Profile
</a><br />
<a ui-sref="sideMenu.settings.vehicle" class="item item-icon-left">
<i class="icon ion-email"></i>
Vehicle
</a>
</div>
plus the target somewhere
<div ui-view=""></div> // here will be the parent state injected
It is working. Check it here

$rootScope to set active tab not working

would anyone be able to help me on this issue I am having?
I have a NavCtrl for manage my active tag, I was able to change the active tab when click on the menu item, however when I click on the link in the body views, it take me to the page I want to, but the active tag is not change.
//controller for nevigation menu
sp.controller('NavCtrl', ['$scope', 'auth', '$window','$rootScope', function ($scope, auth, $window,$rootScope) {
$scope.LogOut = auth.logOut;
$scope.isLoggedIn = auth.isLoggedIn;
$scope.tab = $rootScope.navTav;
$scope.toTop = function(){
$window.scrollTo(0, 0);
};
}]);
I try to use the $rootScope to set the navTab, but it's still not working
//setting root scope
sp.run(function($rootScope) {
$rootScope.navTav = 1;
})
ui-Router
.state('qaanswer', {
url: '/qa/{quesId}',
views: {
view50': {
templateUrl: './qa/qaanswer.html',
controller: 'QAAnswerCtrl'
},
'view60': {
templateUrl: './shareviews/activityupdates.html',
controller: 'HomeCtrl'
}
},
onEnter:['$rootScope',function($rootScope){
$rootScope.navTav = 5;
}]
Thank you so much for the help

Update HTML :
<body ng-controller="NavCtrl">
<!-- Desktop Menu -->
<div>
<div>
<ul>
<a href="#/home" ng-class="{active: navTab === 1}" ng-click="navTab = 1">
<li>Home</li>
</a>
<a href="#/qa" ng-class="{active: navTab === 2}" ng-click="navTab = 2">
<li>QA</li>
</a>
</ul>
</div>
</div>
<div>
<div>
<div class="row">
<div ui-view="view50"></div>
<div ui-view="view60"></div>
</div>
</div>
</div>
</body>
Working plunker

You can simplify your implementation and have no issues. Simply use the $rootScope variable directly in your template along side ng-class like so:
<body ng-controller="NavCtrl">
<a ng-class="{red: $root.navTab===0}" ui-sref="first">first</a>
<a ng-class="{red: $root.navTab===1}" ui-sref="second">second</a>
<div ui-view></div>
</body>
Then update $rootScope in your controllers.
.controller('NavCtrl', function($scope, $rootScope) {});
.controller('FirstCtrl', function($scope, $rootScope) {
$rootScope.navTab = 0;
});
.controller('SecondCtrl', function($scope, $rootScope) {
$rootScope.navTab = 1;
});
Your states get to stay relatively simple:
.state('first', {
url: '/first',
templateUrl: 'first.html',
controller: 'FirstCtrl'
})
.state('second', {
url: '/second',
templateUrl: 'second.html',
controller: 'SecondCtrl'
})
plunker
Ideally you would make a directive for such a task, and avoid using $rootScope. A simple way to do this is to broadcast a message whenever you land on a new page, then listen on that event in your tab directive and flip the correct tab as active.

How use ng-class without a controller?

So, i have this main div, which wrapper the body code:
<main class="main">
</main>
And for which page i have a modifier with the name of the page:
Error page:
<main class="main main--error">
</main>
Events page:
<main class="main main--events">
</main>
Bookings page:
<main class="main main--bookings">
</main>
The main is always in the layout.html, because it will always be present on every page. How can i dynamically insert the class correspondent?
Should i create a MainController just for that? It has some clever way to do this without having to create a controller for just that?
UPDATE --
This is my layout.html:
<main class="main">
<section class="navbar" ng-controller="NavbarCtrl" ng-hide="pageName('Erro')">
<div class="navbar__container">
<div class="navbar__header">
<button class="navbar__toggle navbar__toggle--dashboard" data-sidebar-to="true">
<span class="navbar__icon-bar"></span>
<span class="navbar__icon-bar"></span>
<span class="navbar__icon-bar"></span>
</button>
<form class="navbar__form navbar__form--dashboard" role="search">
<input
class="navbar__search hide--mobile"
type="text" placeholder="Procure por algo...">
</form>
</div>
<ul class="navbar__list">
<li class="navbar__item">
<a class="navbar__link" href="#" title="logout">
<i class="icon icon__sign-out"></i>
<span class="hide--mobile"> Sair </span>
</a>
</li>
</ul>
</div>
</section>
<div
class="breadcrumb"
ng-controller="BreadcrumbCtrl"
ng-hide="pageName('Painel') || pageName('Erro')">
<div class="breadcrumb__container">
<h2 class="breadcrumb__title"> {{ $state.current.name }} </h2>
<ol class="breadcrumb__list">
<li class="breadcrumb__item breadcrumb__item--root"> Painel </li>
<li class="breadcrumb__item"> {{ $state.current.name }} </li>
</ol>
</div>
</div>
<div ui-view></div>
</main>
In the div with the ui-view, the Angular will append my pages, i have 3: error.tmpl.html, events.tmpl.html and bookings.tmpl.html
My generic app.js, where i register the angular module in the routes:
'use strict';
var adminApp = function($stateProvider, $urlRouterProvider) {
/*
* Booking Route
*
*/
var BookingCtrl = {
url: '/',
templateUrl: '/admin/booking/booking.tmpl.html',
controller: 'BookingCtrl'
};
/*
* Event Route
*
*/
var EventCtrl = {
url: '/eventos',
templateUrl: '/admin/event/event.tmpl.html',
controller: 'EventCtrl'
};
/*
* Error Route
*
*/
var ErrorCtrl = {
url: '/erro',
templateUrl: '/admin/error/505.tmpl.html',
controller: 'ErrorCtrl'
};
/*
* Register the states
*
*/
$stateProvider
.state('Bookings', BookingsCtrl)
.state('Eventos', EventCtrl)
.state('Error', ErrorCtrl);
$urlRouterProvider.otherwise('/');
};
angular.module('adminApp', [
'ui.router'
]).config(adminApp);
In my html templates i have this tiny html, which will be append in the ui-view.
The problem is that i need change the , if i access the error page, i need add the class 'main--error', if i access the events page, i need add the class 'main--events' and if i access the bookings page, i need add the class 'main--bookings'

It is conventional to reserve custom elements and attributes to angular directives. The directive will automatically add main class to top-level <main> and main main--statename to the elements belonging to view templates.
app.directive('main', function () {
return {
link: function (scope, element, attrs) {
var view = element.inheritedData('$uiView');
element.addClass('main');
if (!view) return;
element.addClass('main--' + view.state.name.toLowerCase());
}
};
});
Though it looks overengineered to me, there's nothing wrong with writing some classes by hand. If there's too much work with that maybe it is better to change the way the styles are organized.

Looked like directive 'main' will be inside other controllers, so the ng-class variable would be placed there.
In your Main Bookings controller:
$scope.class.name = 'main--bookings';
In your HTML
<main class="main" ng-class="class.name"></main>

View per model/scope object - ui-router / angularjs

Is it possible to have a view per model , ie an edit view for an item, and only that view to be shown for this specific model?
I have a list of tasks, like a todo list. When I click an add button I want an edit view to be shown only for that list and not for every other list I have.
Sorry for my English and possible ignorance on terminology. I am new to Angularjs
My code:
index.html
<div ng-repeat="list in lists" jui-dg-list="{ handle: 'i.fa-arrows' }" class="md-whiteframe-z2 home-drag list" style="top: {{list.ui_top}}px; left: {{list.ui_left}}px;">
<md-subheader>{{list.name}}</md-subheader>
<md-list>
<md-item ng-repeat="task in list.tasks">
<md-item-content>
<div>
<span>{{task.description}}</span>
<span>{{task.completed}}</span>
<span>{{task.priority_id}}</span>
<i class="fa fa-trash-o" ng-click="deleteTask(task, list)"></i>
</div>
</md-item-content>
</md-item>
<div ui-view="newTask"></div>
<i class="fa fa-plus" ng-click="goToState('home.newTask', {id: list.id})"></i>
</md-list>
<i class="fa fa-times" ng-click="deleteList(list)"></i>
<i class="fa fa-arrows"></i>
</div>
app.js
$stateProvider.state('home', {
url: '/',
templateUrl: 'views/home.html',
controller: 'HomeCtrl',
resolve: {
notes: ['NotesLoader', function(NotesLoader){
return NotesLoader();
}],
lists: ['ListsLoader', function(ListsLoader){
return ListsLoader();
}]
}
});
$stateProvider.state('home.newTask', {
url: 'list/:id/task/create',
views: {
'newTask#home': {
templateUrl: 'views/home.newTask.html',
controller: 'NewTaskCtrl'
}
}
});
With this code when I click to add a new task the newTask view will be shown on every list and not on the list I clicked.
That's to be expected because inside to my ng-repeat I have <div ui-view="newTask"></div> so when I go to newTask state every ui-view with the name newTask will be shown.
Is there any way to achieve it only for the model that's was clicked ?