My controller gets called twice when I am using angular material tabs.
The tabs:
<div layout="column" flex="">
<md-content id="content">
<md-tabs md-dynamic-height="" md-selected="selectedIndex" md-border-bottom="" md-autoselect="">
<md-tab label="Home" ui-sref="home">
<div ui-view=""></div>
</md-tab>
<md-tab label="Contact" ui-sref="contact">
<div ui-view=""></div>
</md-tab>
</md-tabs>
</md-content>
</div>
The controllers:
(function () {
'use strict';
angular
.module('app.contact')
.controller('ContactController', ContactController);
function ContactController() {
var vm = this;
activate();
function activate() {
console.log('Contact Controller');
}
}
})();
(function () {
'use strict';
angular
.module('app.home')
.controller('HomeController', HomeController);
function HomeController() {
var vm = this;
activate();
function activate() {
console.log('Home Controller');
}
}
})();
The states:
(function () {
'use strict';
angular.module('app', [
])
.config(configBlock);
function configBlock($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/home");
$stateProvider
.state('home', {
url: "/home",
templateUrl: "home.html",
controller: 'HomeController',
controllerAs: 'vm'
})
.state('contact', {
url: "/contact",
templateUrl: "contact.html",
controller: 'ContactController',
controllerAs: 'vm'
});
}
})();
Plunker
This is, because you are using ui-view two times.
i also hav the same issue
use the ng-include instead of the ng-view
<md-tab label="Issues" >
<ng-include src="'/app/src/project/task/task.tpl.html'"></ng-include>
<!-- <div ui-view></div> -->
</md-tab>
Related
I'm trying to change the view using $location.
This is how i tried to do this.
View
<body ng-app="myApp" ng-controller="testCtrl">
<button ng-click="click();">Press</button>
</body>
Controller
var app = angular.module('myApp',[]);
app.controller('testCtrl',function($scope,$location){
$scope.click = function(){
$location.path('/main');
};
});
app.js
angular.module('myApp', [
'ngRoute',
'myApp.view2',
'myApp.version'
]).
config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider, testCtrl) {
$locationProvider.hashPrefix('!');
$routeProvider
.when('/main',
{
templateUrl: '/view2.html',
controller: testCtrl
})
.otherwise({redirectTo: '/view1'});
}]);
So when i click the button i can see the url changes from
http://localhost:8383/etest/index.html
to
http://localhost:8383/etest/index.html#/main
How can i fix this?
You missed out to include ng-view.
<body ng-app="myApp">
<div ng-view></div>
</body>
// view2.html
<div ng-controller="testCtrl">
<button ng-click="click();">Press</button>
</div>
app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider, testCtrl) {
$locationProvider.hashPrefix('!');
$routeProvider
.when('/main', {
templateUrl: 'templates/view2.html',
controller: testCtrl
})
.otherwise({redirectTo: '/view1'});
}]);
$scope.click = function(){
$location.path('/contact'); //you are in main path, So give different path then only you can see the location change easily.
$route.reload(); // reload the route
};
I would like to add link with controller to route but controller does not work.
I get this:
{{title}}
{{shortTitle}}
{{text}}
If I will put controller only to html also does not work
but when I added script to main controller in Default.html controller working correct
Where I made mistake?
#SSH this not work
$stateProvider
.state('home', {
url: '/',
template: '<div data-ng-include="'Scripts/js_angular_project/website/home/homePage.html'"></div>',
controller: 'homeCtrl'
})
homePage.html
<div>
<h2>{{title}}</h2>
<h3>{{shortTitle}}</h3>
<p>{{text}}</p>
</div>
<script>
app.controller('homeCtrl', function ($scope) {
$scope.title = "Volvo";
$scope.shortTitle = "Volvo";
$scope.text = "example";
});
</script>
#SSH this also does not work
$stateProvider
.state('home', {
url: '/',
templateURL: '/Scripts/js_angular_project/website/home/homePage.html',
controller: 'homeCtrl'
})
homePage.HTML - I remove ng-controller
<div>
<h2>{{title}}</h2>
<h3>{{shortTitle}}</h3>
<p>{{text}}</p>
</div>
<script>
app.controller('homeCtrl', function ($scope) {
$scope.title = "Volvo";
$scope.shortTitle = "Volvo";
$scope.text = "example";
});
</script>
#SSH this not work when I put my code
.html
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
template: '<div><h2>{{title}}</h2><h3>{{shortTitle}}</h3><p>{{text}}</p></div>',
controller:'homeCtrl'
})
.state('about', {
url: '/about',
template: '<div><h2>{{title}}</h2><h3>{{shortTitle}}</h3><p>{{text}}</p></div>',
controller:'aboutCtrl'
})
});
routerApp.controller('homeCtrl', function ($scope) {
$scope.title = "Volvo";
$scope.shortTitle = "Volvo";
$scope.text = "example";
});
routerApp.controller('aboutCtrl', function ($scope) {
$scope.title = "Volvo2";
$scope.shortTitle = "Volvo2";
$scope.text = "example2";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<div ng-app="routerApp">
<nav class="navbar navbar-inverse" role="navigation">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
<div class="container">
<div ui-view></div>
</div>
</div>
you should put controller name in router and also remove ng-controller = "homeCtrl" from template.
state('home' ,{
url : '/',
templateUrl:'/yourTempalteAddress',
controller:'homeCtrl'
})
and define your app in controller.
var app = angular.module("yourApp",[]);
app.controller('homeCtrl', function ($scope) {
$scope.title = "Volvo";
$scope.shortTitle = "Volvo";
$scope.text = "example";
});
Having an login.html it has SignUp Button while click on it its not opening the signup.html page
index.html
<body ng-app="starter" ng-controller="AppCtrl">
<ion-nav-bar class="bar-calm">
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
login.html
<ion-view view-title="Sign-In" name="login-view">
<ion-content class="padding">
<button class="button button-block button-positive" ng-click="signup()">SignUp</button>
</ion-content>
</ion-view>
app.js
angular.module('starter', ['ionic', 'ngMockE2E','ui.router'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (cordova.platformId === 'ios' && window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function ($stateProvider, $urlRouterProvider, USER_ROLES) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
})
.state('signup', {
url: '/signup',
templateUrl: 'templates/signup.html',
controller: 'SignupCtrl'
})
$urlRouterProvider.otherwise('/login');
})
controller.js
.controller('AppCtrl', function ($scope, $state, $ionicPopup, AuthService, AUTH_EVENTS) {
$scope.username = AuthService.username();
$scope.$on(AUTH_EVENTS.notAuthorized, function (event) {
var alertPopup = $ionicPopup.alert({
title: 'Unauthorized!',
template: 'You are not allowed to access this resource.'
});
});
$scope.$on(AUTH_EVENTS.notAuthenticated, function (event) {
AuthService.logout();
$state.go('login');
var alertPopup = $ionicPopup.alert({
title: 'Session Lost!',
template: 'Sorry, You have to login again.'
});
});
$scope.setCurrentUsername = function (name) {
$scope.username = name;
};
})
.controller("SignupCtrl", function ($scope, $state, $ionicPopup, AuthService) {
$scope.data = {};
$scope.signup = function () {
$state.go('singup');
};
})
.controller('LoginCtrl', function ($scope, $state, $ionicPopup, AuthService) {
$scope.data = {};
$scope.login = function (data) {
AuthService.login(data.username, data.password).then(function (authenticated) {
$state.go('main.dash', {}, { reload: true });
$scope.setCurrentUsername(data.username);
}
};
})
and inside the templates folder is having signup.html
<ion-view view-title="Signup" name="Signup-view">
<ion-content padding="true" class="has-header">
<form id="signup-form2" class="list ">
// sign up fields goes here.....
<a ui-sref="login" id="signup-button5" style="border-radius:15px 15px 15px 15px;" class="button button-calm button-block" ng-click="signupEmail(data)">Sign up</a>
</form>
</ion-content>
</ion-view>
I think you are missing the state change function in your LoginCtrl. So you should have it declared in the LoginCtrl because that controller is used in the login.html.
.controller("LoginCtrl", function ($scope, $state) {
$scope.signup = function () {
$state.go('signup');
};
})
Also consider that in your example code you had a typo in the $state.go function. Your state name is singup when it should be signup.
I'm getting very odd behavior from a very simple angular app using ui-router. All the templates are being loaded and displayed properly, but only 1 of the controllers is ever called, the DashboardCtrl. I can't explain this at all.
var adminPanel = angular.module('adminPanel', [
'ui.router',
'adminPanel.controllers'
])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('dashboard', {
url: '/dashboard',
templateUrl: 'templates/dashboard.html',
controller: 'DashboardCtrl'
})
.state('home', {
url: '/home',
templateUrl: 'templates/home.html',
controller: 'HomeCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
});
$urlRouterProvider.otherwise('/login');
});
adminPanel.controllers = angular.module('adminPanel.controllers', [])
.controller('LoginCtrl', function ($scope, $state, AuthService) {
console.log("hello!"); // never called
$scope.user = {
username: null,
password: null
};
$scope.submitLogin = function(loginForm) {
// never called
};
})
.controller('DashboardCtrl', ['$scope', function ($scope) {
console.log("Dashboard"); // this one is called for unkown reason
}])
.controller('HomeCtrl', [ '$scope', '$http', function ($scope, $http) {
console.log("HomeCtrl"); // never called
}]);
Markup is super simple:
<html>
<body ng-app="adminPanel">
<div ui-view></div>
<script src="js/vendor.js" type="text/javascript"/></script>
<script src="js/app.js" type="text/javascript"/></script>
</body>
</html>
The templates:
dashboard.html
<h1>Dashboard</h1>
home.html
<h1>Home</h1>
login.html
<h1>Login</h1>
<form name="loginForm" class="login-form" ng-submit="submitLogin(loginForm)">
<input type="text" name="username" ng-model="user.username"/>
<input type="password" name="password" ng-model="user.password"/>
</form>
I believe there was an issue with how I was attaching the controllers to the base angular module, but I still can't say for sure.
I have a ui-router linking tabs working in plnkr, This is built off k.Scott Allen's deep linking tabs. I have it working perfectly in plnkr, but when I implement it into my app it won't work. My app is built off the anuglar-seed. It's like they arn't linked. neither my tabs or my views appear. My views are in the partials directory located in the root app directory myApp/app/partials
my appjs
'use strict'
// Declare app level module which depends on filters, and services
angular.module("myApp", ['ui.router',
'ngCookies',
'ngResource',
'ngSanitize',
'iu.bootstrap',
'ngGrid',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
])
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("main/firstTab");
$stateProvider
.state("main", { abtract: true, url:"partials/main", templateUrl:"main.html" })
.state("main.firstTab", { url: "partials/firstTab", templateUrl: "firstTab.html" })
.state("main.secondTab", { url: "partials/secondTab", templateUrl: "secondTab.html" })
.state("main.thirdTab", { url: "partials/thirdTab", templateUrl: "thirdTab.html" })
.state("main.fourthTab", {url: "partials/fourthTab", templateUrl: "fourthTab.html"});
});
my controllerjs
'use strict';
/* Controllers */
angular.module('myApp.controllers', [])
.controller("tabController", function($rootScope, $scope, $state) {
$scope.go = function(route){
$state.go(route);
};
$scope.active = function(route){
return $state.is(route);
};
$scope.tabs = [
{ heading: "firstTab", route:"main.firstTab", active:false },
{ heading: "secondTab", route:"main.secondTab", active:false },
{ heading: "thirdTab", route:"main.thirdTab", active:false },
{ Heading: "Reports"},
{ heading: "Reports", route:"main.fourthTab", active:false },
];
$scope.$on("$stateChangeSuccess", function() {
$scope.tabs.forEach(function(tab) {
tab.active = $scope.active(tab.route);
});
});
});
my mainhtml
<div ng-controller="tabController">
<section class=" span3 " style="float:left">
<tabset vertical="true" type="pills">
<tab
ng-repeat="t in tabs"
heading="{{t.heading}}"
select="go(t.route)"
active="t.active">
</tab>
</tabset>
</section>
<section class="span12 " >
<!--Content Blocks -->
<div class="tab-content" style="border-bottom-right-radius: 1em; min-height:400px; overflow: hidden;" >
<div ui-view></div>
</div>
</section>
</div>
in index
<html lang="en" ng-app="myApp" class="no-js">
<div ui-view></div>
angular.module("myApp", ['ui.router',
'ngCookies',
'ngResource',
'ngSanitize',
'ui.bootstrap',
'ngGrid',
'myApp.filters',
'myApp.services',
'myApp.directives',
'myApp.controllers'
]);
You need to change iu.bootstrap to ui.bootstrap.
The Solution was with the with the mapping of the main page and the partials. They weren't correct!
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("partials/main/firstTab");
$stateProvider
.state("main", { abtract: true, url:"/partials/main", templateUrl:"partials/main.html" })
.state("main.firstTab", { url: "/partials/firstTab", templateUrl: "partials/firstTab.html" })
.state("main.secondTab", { url: "/partialssecondTab/", templateUrl: "partials/secondTab.html" })
.state("main.thirdTab", { url: "/partials/thirdTab", templateUrl: "partials/thirdTab.html" })
.state("main.fourthTab", {url: "/partials/fourthTab", templateUrl: "partials/fourthTab.html"});
});