I am trying give dynamic link from my models which names are "aracData.planlama".
There is no problem on this. But when I click the link I get "could not resolve from state" error on console.
<div class="form-group">
<div class="radio">
<label>
<input type="radio" ng-model="aracData.planlama" value="sifirmi">
Araç satın alınmış durumda
</label>
</div>
<div class="radio">
<label>
<input type="radio" ng-model="aracData.planlama" value="satin-alinacak">
Satın alınması planlanıyor
</label>
</div>
<div class="form-group row">
<div class="col-xs-6 col-xs-offset-3">
<a ui-sref="form.{{aracData.planlama}}" class="btn btn-block btn-info" ng-class="{disabled:aracData.planlama == undefined}">
Sonraki adım <span class="glyphicon glyphicon-circle-arrow-right"></span>
</a>
</div>
And theese are my routing codes:
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('form', {
url: '/form',
templateUrl: 'form.html',
controller: 'formController'
})
.state('form.profile', {
url: '/profile',
templateUrl: 'form-profile.html'
})
.state('form.interests', {
url: '/interests',
templateUrl: 'form-interests.html'
})
.state('form.sifirmi', {
url: '/sifirmi',
templateUrl: 'sifir-mi-ikinci-el-mi.html'
})
.state('form.alindimi', {
url: '/alindimi',
templateUrl: 'alindi-mi.html'
})
.state('form.payment', {
url: '/payment',
templateUrl: 'form-payment.html'
});
$urlRouterProvider.otherwise('/form/profile');
})
How can I fix this?
You can't pass an expression to ui-sref for the state name. Instead, you can do this in the controller.
<a ng-click="go(aracData.planlama)">
Inject the $state service into your controller, then do:
$scope.go = function(sub) {
$state.go('form.'+sub);
};
This will probably also work:
$scope.go = $state.go; // may need to do $state.go.bind($state);
<a ng-click="go('form'+aracData.planlama)">
Click here for GitHub discussion about dynamic state name for ui-sref.
Related
I am trying to get the ng-model value from html to controller and getting undefined.
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="uname">User Name</label>
<div class="col-md-7">
<input type="text" ng-model="login.user.name" id="uname" class="username form-control input-sm" placeholder="User name" required ng-minlength="3"/>
</div>
</div>
</div>
<button type="button" ng-click="login.getUser(login.user.name)" class="btn btn-warning btn-sm" ng-disabled="myForm.$pristine">Login</button>
In Controller I am using the below code,
function getUser(name){
console.log('User Name --> '+$scope.login.user.name+" "+$scope.name+" "+self.user.name +$scope.userName+" "+name);
return LoginService.getUserByName(name);
}
In app.js I am using controller,
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'partials/list',
controller:'UserController',
controllerAs:'ctrl',
resolve: {
users: function ($q, UserService) {
console.log('Load all users');
var deferred = $q.defer();
UserService.loadAllUsers().then(deferred.resolve, deferred.resolve);
return deferred.promise;
}
}
}).state('login', {
url: '/login',
templateUrl: 'partials/login',
controller: 'loginController',
controllerAs:'login'
});
$urlRouterProvider.otherwise('/');
}]);
I am getting undefined in console. Please suggest why I am not able to receive the value.
As i see in your code you using controllerAs syntax. so in your controller probably using var self = this;
to access models in controller use this
console.log('User Name --> '+self.user.name);
THIS IS MY LOGIN CONTROLLER
app.controller('lgctrl', function ($scope, $state) {
$scope.open = function () {
$state.go('home-menu');
}
});
THIS IS MY App.js
$stateProvider.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'lgctrl'
});
$stateProvider.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
});
$stateProvider.state('app.home-menu', {
url: '/home-menu',
views: {
'menuContent': {
templateUrl: "templates/home-menu.html"
}
}
});
$urlRouterProvider.otherwise('/login');
THIS IS MY Login.html
<ion-view view-title="Login">
<ion-content>
<div class="list">
<label class="item item-input item-floating-label">
<span class="input-label">Email</span>
<input type="text" placeholder="Email">
</label>
<label class="item item-input item-floating-label">
<span class="input-label">Password</span>
<input type="Password" placeholder="Password">
</label>
</div>
<button ng-click="open()" class="button button-block button-positive">
Login
</button >
Don't have an Account? Sign-Up | <a href="" >FAQ</a>
</ion-content>
</ion-view>
when i am clicking on login button i am getting this error my state.go is not redirecting to the home-menu page
Error: Could not resolve 'home-menu' from state 'login'
at Object.transitionTo (ionic.bundle.js:52013)
at Object.go (ionic.bundle.js:51946)
at Scope.$scope.open (Controller.js:38)
at fn (eval at compile (ionic.bundle.js:27638), <anonymous>:4:203)
at ionic.bundle.js:65427
at Scope.$eval (ionic.bundle.js:30395)
at Scope.$apply (ionic.bundle.js:30495)
at HTMLButtonElement.<anonymous> (ionic.bundle.js:65426)
at defaultHandlerWrapper (ionic.bundle.js:16787)
at HTMLButtonElement.eventHandler (ionic.bundle.js:16775)
In your route config, you've defined your state as 'app.home-menu', but try to access it as 'home-menu' in the controller. As such, ui-router can't find a matching state definition for 'home-menu'
Try $state.go('app.home-menu'); instead
try updating the below code.
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller : 'lgctrl'
});
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
});
.state('app.home-menu', {
url: '/home-menu',
views: {
'menuContent' :{
templateUrl: "templates/home-menu.html"
}
}
});
$urlRouterProvider.otherwise('/login');
I want to make default my dashboard page.So write following code in app.js
$urlRouterProvider.otherwise('/app/dashboard')
But when ionic application launch in mobil device,login page before show,dashboard page is appearing afterward disappearing.I want to dashboard page never be show before from login page How can i solve this problem.
Login Page:
<ion-view view-title="Kayıt Ol" hide-back-button="true">
<ion-content class="padding ">
<div style="padding:40px 0 40px 0; text-align:center;font-size:45px;color:#ff6707">
Login
</div>
<div class="card list-inset">
<form novalidate >
<label class="item item-input">
<input type="email" placeholder="Email" required ng-model="user.email">
</label>
<label class="item item-input">
<input type="password" placeholder="Email" required ng-model="user.password">
</label>
</form>
</div>
<button class="button button-block button-positive icon-button icon-center ion-person-add" ng-disabled="!user.email && !user.password" ng-click="Login()">Login</button>
</ion-content>
</ion-view>
app.js
.state('app', {
url: "/app",
cache: false,
abstract: true,
templateUrl: "templates/app.html",
controller: 'AppCtrl'
})
.state('login', {
url: "/login",
cache: false,
abstract: true,
templateUrl: "templates/login.html",
controller: 'LoginCtrl'
})
.state('app.dashboard', {
url: '/dashboard',
cache: false,
views: {
'menuContent': {
templateUrl: 'templates/dashboard.html',
controller: 'DashboardCtrl'
}
}
})
$urlRouterProvider.otherwise('/app/dashboard');
Why don't use $urlRouterProvider.otherwise('/login')? then in LoginCtrl controller, you should check if the user is logged and then you can use $state.go('app.dashboard').
But, maybe this is not the best idea. I am not sure about this but here you have a good answer with another method: https://stackoverflow.com/a/32734632/2012904
And i think you are wrong with the use of the abstract property. Check this: https://stackoverflow.com/a/24969722/2012904
But like others said, post your code in controllers so we can understand your issue at all.
So I have no idea what is wrong, but im assuming i have a loop running in the background of my code or that im routing incorrectly. But all i know is when i try to go to my index page, my entire browser is taken down, no errors or anything, just crashing. Any help would really be appreciated im just trying to move on from this problem.And in case this changes anything i am using a rails backend.
planoxApp.config(['$stateProvider','$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'templates/home/nav.html',
authenticate: true
})
.state('home.index', { // our home page
url: '/index',
views: {
"": {templateUrl: 'templates/home/home.html'},
"assembly#index": { templateUrl: "templates/home/assembly.html" },
"client#index": { templateUrl: "templates/home/client.html" },
"photoplan#index": { templateUrl: "templates/home/home_photoplan.html" }
},
authenticate: true
})
Here is the main routes causing problems, the home one is just a nav bar, and when you go to the home tab its supposed to take you to the index page, but no dice. Im not sure how much of my controller i should show, but here a small part.Its the parts that directly effect the routes.
app.run(function ($rootScope,$location, $localStorage){
$localStorage.recent = ""
$rootScope.$on('$routeChangeSuccess', function() {
console.log("working")
recent.push($location.$$path);
});
});
app.run(function ($rootScope, $state, AuthService) {
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
if (toState.authenticate && !AuthService.isAuthenticated()){
// User isn’t authenticated
console.log(AuthService.isAuthenticated())
$state.transitionTo("login");
event.preventDefault();
}
});
});
// GET request Area
$http.get('client.JSON').success(function(data){
$scope.clients = data;
});
$http.get('photoplan.JSON').success(function(data){
$scope.photoplans = data;
$scope.complete = true;
// if(main.photoplans.plano_order_status === "Complete"){
// console.log()
// $scope.complete = true;
// }else{
// $scope.complete = false;
// }
});
$http.get('assembly.JSON').success(function(data){
// main.assemblys = $filter('filter')(data, function(d){return d.employee_id == mainid});
$scope.assemblys = data;
console.log($scope.assemblys)
});
$http.get('employee.JSON').success(function(data){
$scope.employees = data;
});
}]);
This is the index page, and one of the nested views it has, all the views look roughly the same.
<div class="container" ng-controller="MainCtrl">
<!-- Main Section -->
<div class="home no-subheader container">
<div class="row" >
<!-- left -->
<section name="assembly-queue" class="molding col-md-4" id="assembly">
<div class="gutter" >
<div ui-view="assembly"> </div>
</div>
</section>
<!-- <section name="employee-queue" ng-if="type === 'admin'" class="molding col-md-4" id="employee">
<div class="gutter" id="scrollArea">
<div ui-view=".employee"></div>
</div>
</section> -->
<!-- middle -->
<section name="clients" class="molding col-md-4" id="clients">
<div class="gutter" >
<div ui-view="client"> </div>
</div>
</section>
<!-- right -->
<section name="photoplans" class="molding col-md-4" id="photoplans">
<div class="gutter" >
<div ui-view="photoplan"> </div>
</div>
</section>
</div>
</div>
</div>
This is the assembly page.
<div id="expanding" >
<div class="top row">
<h2> Assembly Queue</h2>
<form class="navbar-form navbar-left default" role="search">
<div class="form-group">
<input type="text" ng-model="searchassembly" class="form-control query" placeholder="Search Assembly Queue">
</div>
</form>
</div>
</div>
<article class="assembly snippet row" ng-repeat="assembly in assemblys|filter:searchassembly" >
<div class="left col-xs-7" >
<address>{{assembly.address_part1}},{{assembly.address_part2}}</address>
<p class="timeline-data"> Due on {{assembly.date_due}}</p>
<p class="timeline-data"> Job Type: {{assembly.job_type}}</p>
<p class="timeline-data"> Delivery Type: {{assembly.delivery_type}}</p>
</div>
<div class="right col-xs-5 text-center">
<div class="corner-ribbon" ng-click="open(assembly.id)" > </div>
<button ng-if="assembly.new_order" class="btn btn-default" ui-sref="photoplans({ id : assembly.photoplan_id })" ><span class="fa fa-pencil-square-o" aria-hidden="true"></span></button>
<button ng-if="assembly.new_order === false" class="btn btn-default" ui-sref="assign({address : assembly.address, realtor: assembly.realtor})" ><span class="fa fa-external-link" aria-hidden="true"></span></button>
</div>
</article>
If anyone has had similar issues or can see red flags in this please let me know, i am really stuck on this issue.
Okay so i actually found the answer myself, and im leaving the solution here for future people who might have this issue. But basically i need to have word of some kind in my home route, so instead of just /, i need /home. Because the browser was trying to load this #//index, and that was causing crashes. When using rails and angular together, make sure to have named routes to prevent this problem. Also make sure your nested views look like this, whatever#parent.child. Heres my new code.
planoxApp.config(['$stateProvider','$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'templates/home/nav.html',
authenticate: true
})
.state('home.index', { // our home page
url: '/index',
views: {
"": {templateUrl: 'templates/home/home.html'},
"assembly#home.index": { templateUrl: "templates/home/assembly.html" },
"client#home.index": { templateUrl: "templates/home/client.html" },
"photoplan#home.index": { templateUrl: "templates/home/home_photoplan.html" }
},
authenticate: true
})
The SignupCtrl controller is not binding to signup view. Even when i press the submit button it don't work. But when i place ng-controller=SignupCtrl in the form tag it works. Just wondering why ui-router state parameter controller was not working.
index.html
<html class="no-js" ng-app="mainApp" ng-controller="MainCtrl">
<head> ....
</head>
<body class="home-page">
<div ui-view="header"></div>
<div ui-view="content"></div>
<div ui-view="footer"></div>
...
signup.html
<div class="form-container col-md-5 col-sm-12 col-xs-12">
<form class="signup-form">
<div class="form-group email">
<label class="sr-only" for="signup-email">Your email</label>
<input id="signup-email" type="email" ng-model="user.email" class="form-control login-email" placeholder="Your email">
</div>
<!--//form-group-->
<div class="form-group password">
<label class="sr-only" for="signup-password">Your password</label>
<input id="signup-password" type="password" ng-model="user.password" class="form-control login-password" placeholder="Password">
</div>
<!--//form-group-->
<button type="submit" ng-click="createUser()" class="btn btn-block btn-cta-primary">Sign up</button>
<p class="note">By signing up, you agree to our terms of services and privacy policy.</p>
<p class="lead">Already have an account? <a class="login-link" id="login-link" ui-sref="login">Log in</a>
</p>
</form>
</div><!--//form-container-->
app.js
angular
.module('mainApp', [
'services.config',
'mainApp.signup'
])
.config(['$urlRouterProvider', function($urlRouterProvider){
$urlRouterProvider.otherwise('/');
}])
signup.js
'use strict';
/**
* #ngdoc function
* #name mainApp.signup
* #description
* # SignupCtrl
*/
angular
.module('mainApp.signup', [
'ui.router',
'angular-storage'
])
.config(['$stateProvider', function($stateProvider){
$stateProvider.state('signup',{
url: '/signup',
controller: 'SignupCtrl',
views: {
'header': {
templateUrl: '/pages/templates/nav.html'
},
'content' : {
templateUrl: '/pages/signup/signup.html'
},
'footer' : {
templateUrl: '/pages/templates/footer.html'
}
}
});
}])
.controller( 'SignupCtrl', function SignupController( $scope, $http, store, $state) {
$scope.user = {};
$scope.createUser = function() {
$http({
url: 'http://localhost:3001/users',
method: 'POST',
data: $scope.user
}).then(function(response) {
store.set('jwt', response.data.id_token);
$state.go('home');
}, function(error) {
alert(error.data);
});
}
});
There is a working plunker. Firstly, check this Q & A:
Are there different ways of declaring the controller associated with an Angular UI Router state
Where we can see, that
controller does not belong to state. It belongs to view!
This should be the state definition:
$stateProvider.state('signup',{
url: '/signup',
//controller: 'SignupCtrl',
views: {
'header': {
templateUrl: 'pages/templates/nav.html'
},
'content' : {
templateUrl: 'pages/signup/signup.html',
controller: 'SignupCtrl',
},
'footer' : {
templateUrl: 'pages/templates/footer.html'
}
}
});
Check it here
You need a template to bind a controller.
In the docs ui-router Controllers
Controllers
You can assign a controller to your template. Warning: The controller
will not be instantiated if template is not defined.