I am trying to use a url to call a tab element. For example, a url like: localhost:9000/widget&view=map will land on the page with the map tab selected and shown the map tab body.
<div class="search-result-tab" ng-init="selectTab='list'">
<ul class="nav tab-header">
<li ng-class="{active: selectTab=='list'}" ng-click="selectTab='list'; changedTab()">
<a href={{listTabURL}}>List</a>
</li>
<li ng-class="{active: selectTab=='map'}" ng-click="selectTab='map'; changedTab()">
<a href={{mapTabURL}}>Map</a>
</li>
</ul>
<div class="tab-body" ng-switch on="selectTab">
<div class="tab-content" ng-switch-when="list">
<div ng-include="'list.html'"></div>
</div>
<div class="tab-content" ng-switch-when="map">
<div ng-include="'map.html'"></div>
</div>
</div>
</div>
Other urls are:
list: localhost:9000/widget&view=list
map: localhost:9000/widget&view=map
Similar question here. One suggestion is to inject the $location service and switch on $location.path, might be worth a try if you are not going to try ui-router (which you really should look into!)
function Ctrl($scope, $location) {
$scope.pagename = function() { return $location.path(); };
};
<div id="header">
<div ng-switch on="pagename()">
<div ng-switch-when="/home">Welcome!</div>
<div ng-switch-when="/product-list">Our products</div>
<div ng-switch-when="/contact">Contact us</div>
</div>
</div>
Related
I tried to hide some menus using a controller. Here is my element container where the menu will be loaded.
<div class="page-content" ng-controller = "menuController">
<div id="Menu" > </div>
<div ng-view> </div>
</div>
<script>
$(function(){
$("#Menu").load("Menu.html");
});
app.controller("menuController", function($scope) {
$scope.showMenu = false;
});
</script>
I wrote the menu in seperate html file.
<div class="category-content no-padding">
<ul ng-show= "showMenu">
<li><i class="fa fa-h-square text-brown" aria-hidden="true"></i><span>Organization</span>
</li>
<li><i class="fa fa-hospital-o text-brown" aria-hidden="true"></i><span>Clinic</span>
</li>
<li><i class="fa fa-user text-brown" aria-hidden="true"></i><span >User</span>
</li>
</ul>
</div>
But for me scope variable declared in the controller does not have any impact on menu. Please help me to overcome this.
Thanks for your valuable time.
Mixing Jquery code with Angular code is not very good.
You can use angular's ng-include directive to load your menu:
<div class="page-content" ng-controller = "menuController">
<div ng-include="'Menu.html'" > </div>
<div ng-view> </div>
</div>
Depending on the location of Menu.html, you may have to precise the entire path, for example:
<div> ng-include="'folder/subfolder/Menu.html'" </div>
This question have good chance to be a duplicate, but after some searches I wasn't able to find a good explanation to my problem - so I apologize if this is the case.
Well, I got a template which is actually written like this:
<div ng-include="'includes/header.html'"></div>
<section>... Template for homepage, page1, page2... </section>
<div ng-include="'includes/footer.html'"></div>
My header.html is like this:
<section class="header">
<div class="wrapper">
<img id="logotype" src="images/logotype.png">
<ul id="menu">
<li>
Home
</li>
<li class="border-none">
<a class="a" ng-click="chatClicked = !chatClicked">Click to chat</a>
</li>
<li id="logout" class="glyphicon glyphicon-off border-none">
Logout
</li>
</ul>
</div>
</section>
And my footer.html like this:
<section class="footer">
<div class="wrapper">
<ul id="menu-left">
<li>
Home
</li>
<li>
<a class="a" ng-click="chatClicked = !chatClicked">Click to chat</a>
</li>
</div>
</section>
I was wondering if there is a way to open open/hide this new include on all pages (
<div ng-if="chatClicked" ng-controller='ChatController' ng-include="'includes/popup-chat-to-click.html'"></div>
) each time the event chatCliked is triggered - and if it is possible - where it is the best to place this last div?
Ok problem resolved using this link, sorry:
AngularJS - losing scope when using ng-include
This was a matter of $scope.
I had to add this in my controller:
app.controller('homeController',
['$scope'',
function ($scope) {
$scope.chat = { clicked: false };
}]);
in my main view:
<div ng-include="'includes/header.html'"></div>
<div ng-if="chat.clicked" ng-controller='ChatController' ng-include="'modules/chat/popup-contact.html'"></div>
in my header.html:
<a class="a" ng-click="chat.clicked = !chat.clicked">Contact us</a>
So I have been reading this article which suggests using $watch in your controllers is bad.
I am trying to take the advice. I have controller that looks like this:
.controller('NavigationController', ['$rootScope', '$scope', function ($rootScope, $scope) {
var self = this;
// Get our current user
self.user = $rootScope.user;
// Watch
$scope.$watch(function () {
// Return our user
return $rootScope.user;
}, function (user) {
// Set our user to the new user
self.user = user;
});
}]);
and my HTML looks like this:
<div class="account-header" ng-controller="NavigationController as controller" ng-cloak ng-show="controller.user.authenticated">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-account">
<div class="collapse navbar-collapse" id="account-menu">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" dropdown>
<a class="dropdown-toggle" dropdown-toggle>{{ controller.user.userName }} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="teams">Team settings</a></li>
<li><a ui-sref="account">Account settings</a></li>
<li><a ui-sref="logout">Sign out</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
You can see that I am only showing the account menu when the user is logged in. After reading the article, I am struggling to see how I can actually change my controller.
Does anyone have any suggestions?
Update 1
Some of you have said because it is in the rootscope, I don't have to do anything. I can just use user in the HTML and it should work fine.
I tested this like this:
<div class="account-header" ng-cloak ng-show="user.authenticated">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-account">
<div class="collapse navbar-collapse" id="account-menu">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" dropdown>
<a class="dropdown-toggle" dropdown-toggle>{{ user.userName }} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a ui-sref="teams">Team settings</a></li>
<li><a ui-sref="account">Account settings</a></li>
<li><a ui-sref="logout">Sign out</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
and it did work.
Now what I want to do is add another menu item, this item is only shown if there are any kits. But I would rather not do a API call on every state change, so the only thing I can see is to amend something when a kit is either added or deleted.
But I am not sure what is the best way to do this.
When the user changes broadcast a 'userLoggin' event on the $rootScope. Then listen for that event in your controller.
Or $emit the event on $rootScope and in the controller listen on the $rootScope by injecting it.
$rootScope.$on('userLoggin' function() {
// React to user change.
})
I am using ng-show and ng-click to show / hide 2 divs based on the user click of one of the app menu as shown below. The problem I am facing is that on clicking on the link to display the dashboard div nothing is shown, instead the other div (div2) is always shown. Can someone please check my code and let me know what exactly I am doing wrong here? Thanks
index
<div id="header" ng-controller="MenuController">
<ul >
<li>
Main
</li>
<li>
<a href ng-hide="userLogged == 1">Login</a>
<a href ng-click="switchDashboard()" ng-show="userLogged > 1">Dashboard</a>
</li>
</ul>
</div>
<div>
<div ng-controller="MenuController">
<div id="dashboard" ng-show="showUserPanel">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</div>
<div id="div2" ng-hide="showUserPanel">
<ul>
<li>Reg item 1</li>
<li>Reg item 2</li>
</ul>
</div>
<div ng-view></div>
</div>
</div>
MenuController:
$scope.showUserPanel = false;
$scope.switchDashboard = function(){
$scope.showUserPanel = !$scope.showUserPanel;
};
I have also tried changing the index to have only one instance for MenuController, but I still have as shown below the same problem
<div id="header" ng-controller="MenuController">
<ul >
<li>
Main
</li>
<li>
<a href ng-hide="userLogged == 1">Login</a>
<a href ng-click="switchDashboard()" ng-show="userLogged > 1">Dashboard</a>
</li>
</ul>
<div id="dashboard" ng-show="showUserPanel">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</div>
<div id="div2" ng-hide="showUserPanel">
<ul>
<li>Reg item 1</li>
<li>Reg item 2</li>
</ul>
</div>
</div>
<div>
<div ng-controller="MenuController">
<div ng-view></div>
</div>
</div>
You have 2 different instances of your controller and they will function independently of each other, see this fiddle: http://jsfiddle.net/k4YH6/
HTML:
<div ng-app>
<div ng-controller="MyCtrl">
<button type="button" ng-click="increment()">Ctrl instance 1: {{value}}</button>
</div>
<div ng-controller="MyCtrl">
<button type="button" ng-click="increment()">Ctrl instance 2: {{value}}</button>
</div>
</div>
JS:
function MyCtrl($scope) {
$scope.value = 1;
$scope.increment = function () {
$scope.value++;
};
}
More related fiddle: http://jsfiddle.net/jph4n/
You don't need the switchDashoard() function.
ng-click="showUserPanel = !showUserPanel"
ng-show="showUserPanel"
showUserPanel = !showUserPanel Will toggle the values for ng-show/ng-hide.
I've got an angularjs app with a nav bar inside my index.html page like that :
<div class="navbar navbar-inverse navbar-fixed-top" ng-controller="NavCtrl">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>
Home
</li>
<li>
Add a contact
</li>
<li>
Users
</li>
<li>
Agencies
</li>
<li>
<a ng-click="intro()">Help</a>
</li>
</ul>
</div>
</div>
</div>
This div use a controller, and when i click on the help link it calls the intro method of my controller. But this method is called twice each time !!
This is my controller :
'use strict';
angular.module('myApp')
.controller('NavCtrl', function ($scope, $location) {
$scope.intro = function(){
if($location.path() != '/'){
toastr.warning("Warning.");
}else{
introJs().start();
}
}
});
Any idea ?..
This is the complete html :
<div class="navbar navbar-inverse navbar-fixed-top" ng-controller="NavCtrl">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li ng-class="navClass('')">
Home
</li>
<li ng-class="navClass('add')">
Add a contact
</li>
<li ng-class="navClass('users')">
Users
</li>
<li ng-class="navClass('agencies')">
Agencies
</li>
<li>
<a ng-click="intro()">Help</a>
</li>
</ul>
</div>
</div>
</div>
<div class="show-grid"></div>
<div class="container">
<div class="row" ng-view></div>
</div>
Resolved :
Someone (on my project) has added an angular.min script file ... We' have already the angular file for develoment ...
Two angular core library no conflict just methods called twice of course ...
Really my bad sorry guys thx for ur replies