I have a left nav in my one of the view of the application whiich is build using ng-repeat and ng-switch. every link's action associate to a directive in the right hand side. some time, the particular directive will include other directive when user click on the dropdown items from the current directive and page gets extended long and long , so if user want to go to the original state then he can click on the nav item from the left nav to refresh the page to the initial state of the directive. But whenever user clicks on the left nav second time when the left nav already selected, it is not get triggered.I want this get tirggered to bring my initial page of the RHS.
My highlevel code as follows
about.html
<div class="leftNav">
<ul class="nav myNav">
<li class="presentation" ng-repeat="link in links" ng-class="{link-active:currentLink=link.value==param}">
<a ng-href="#/home/{{link.value}}" ng-click="fetchLink(param)">{{link.title}}</a>
</li>
</ul>
</div>
<div ng-switch="fetchLink()">
<div ng-switch-when="About Us">
<div about-us></div>
</div>
<div ng-switch-when="Board Directors">
<div board-directors></div>
</div>
<div ng-switch-when="Our Impacts">
<div our-impacts></div>
</div>
</div>
aboutController.js
$scope.links = [{ title="About Us", value="about"},
{ title="Board Directors",value="board"},
{ title="Our Impacts", value="impact"} ];
var myParam =$root.current.params;
$scope.param = myParam.sec;
//sec has been configured in the route and get
// the values from user's input
$scope.fetchLink() = function() {
var retVal='';
var retVals = $.grep($scope.links, function(item,ind){
return item.value=$scope.param
});
if(retVals.length>0){
retVal = retVals[0].title;
}
return retVal;
};
};
On the router code of app.js
$routeProvider
.when('/about/:sec', {
templateUrl : 'app/view/about.html',
controller: 'aboutController.js'
});
}
When i click the second time, nothing get triggered and fetchLink() method is not triggered.
Related
I'm new in Angularjs and I have an app, with some "projects", which have a local menu displayed on some pages. Index.html contains the main navbar with footer :
<body ng-app="ysi-app" ng-controller="MainController">
<div class="page-content">
<div class="row">
<div class="col-md-2">
<div class="sidebar content-box" style="display: block;">
<ul class="nav">
<!-- Main menu -->
<li ng-if="isAuthenticated()">{{name}}</li>
<li class="current">Dashboard</li>
<li>Projects</li>
</ul>
</div>
<div ng-if="isAuthenticated() && displayProjectMenu == true" ng-include="'views/localMenu.html'" ng-controller="LocalMenuController">
</div>
</div>
<div ng-view></div>
</div>
So I have a nested controller LocalMenuController for the local menu and a main controller. The project controller sets the datas :
angular.module('ProjectCtrl',[]).controller('ProjectController',function($scope,$location, ProjectService,$route, AuthenticationService, $rootScope){
$scope.setProjectDatas = function(projectName, projectId){
ProjectService.setName(projectName);
$rootScope.projectId = projectId;
};});
I set the id of one project to the $rootScope for testing (I have a Service which will do that better) and get it in the LocalMenuController :
angular.module('LocalMenuCtrl',[]).controller('LocalMenuController', function($scope, ProjectService, $rootScope) {
$scope.projectId = '';
$scope.projectId = $rootScope.projectId;
});
I display projects in a table and when I clicked on one of it, the function setProjectDatas(name,id) is called. The problem is when I clicked on one project, the id of the project is correct and set but when I go previous and clicked on another project, the id is the old id of the project previously clicked. The datas are not updating. I googled my problem but found nothing on it.
I think the LocalMenuController is called only one time but not after.
What am I doing wrong ?
Thank you
UPDATE
I've created a Directive which displays the template but it's still not updating the partial view localMenu.
LocalMenu Directive :
angular.module('LocalMenuCtrl',[]).controller('LocalMenuController', function($scope, ProjectService, $rootScope) {
console.log('-> LocalMenu controller');
})
.directive('localMenu', function($rootScope){
return {
templateUrl: '/YSI-Dev/public/views/partials/localMenu.html',
link: function(scope){
scope.projectId = $rootScope.projectId;
}
};
});
A part of index.html
<div ng-if="isAuthenticated() && displayProjectMenu == true" ng-controller="LocalMenuController">
<div local-menu></div>
</div>
Partial view localMenu :
<div class="sidebar content-box" style="display: block;">
<ul class="nav">
<li><i class="glyphicon glyphicon-list-alt"></i> Backlog</li>
<li><i class="glyphicon glyphicon-user"></i> My team </li>
</ul>
</div>
I'm trying to get the projectId from the $rootScope and inject it in the <a href="#/project/{{projectId}}" but I have some troubles. What's the way to do that ?
First of all, try using directives instead of ng-controller. You can encapsulate your code and template into a unit. You can also try creating a component. Pass some data to the directive/component and Angular will take care of updating the template and running whatever needs to run within the directive/component. (Given that you used two-way data-bindings)
From the code above, I cannot see what would trigger LocalMenuController to run again.
I am working on an angularJS application which has a page where I display around 30 items using ng-repeat. In front of each item, there is a toggle button (enabled/disabled). With the current code that I have, I can toggle these items. But the problem is if I scroll down and toggle lets say item 25, then automatically it scrolls to the top of the page. If I now scroll down, I can see that the toggle actually took place.
So the requirement now is to make sure that the scroll position is retained after the toggle button is clicked.
Please see below the code that I have.
HTML
<div id="eventTypes" class="panel-body">
<div ng-if="!spinner" ng-repeat="item in items" class="panel-body">
<div class="row">
<div class="col-md-9">{{item.itemName)}}</div>
<div class="col-md-3">
<input id="toggleEnabled"
type="button"
ng-class="{'btn-primary': item.enabled}"
value="{{item.enabled ? 'enabled' : 'disabled'}}"
ng-click="toggleEnabled(item)">
</div>
</div>
</div>
<div ng-if="spinner" class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
</div>
JS
(function () {
'use strict';
angular.module('myApp').controller('itemsController', function ($scope, itemsService) {
var serviceError = function (errorMsg) {
console.log(errorMsg);
$scope.turnOffSpinner();
};
$scope.items = [];
$scope.item = {};
$scope.spinner = true;
$scope.toggleEnabled = function (item) {
$scope.turnOnSpinner();
itemsService.toggleEnabled(item)
.then(function () {
$scope.loaditems();
});
};
$scope.loaditems = function () {
itemsService.getitems().then(function (response) {
$scope.items = response.data;
}, serviceError);
$scope.turnOffSpinner();
};
$scope.turnOnSpinner = function () {
$scope.spinner = true;
};
$scope.turnOffSpinner = function () {
$scope.spinner = false;
};
$scope.loaditems();
});
}());
How this works right now is, once I click the toggle button, a spinner is enabled. Meanwhile the controller will call the itemService.toggleEnabled() method which does an ajax call to the server to just change the status of the item(enabled to disabled or vice-versa) in the backend. On successful change of the status and when the ajax call returns, the $scope.loadItems() method is called in the controller. This method will then do another ajax call to fetch the items (now with the updated status of the item that was toggled). The spinner is disabled and the data is then displayed on the UI.
When all of this is done, the page is scrolled to the top. This is annoying when I want to toggle an item which is way down in the list.
I want the page to be present at the same position when I clicked the toggle button of the corresponding item and not scrolling up to the top.
I am new to AngularJS and any help in this regard would be really helpful.
It looks like your spinner scheme is what's causing you problems:
...
<div ng-if="!spinner" ng-repeat="item in items" class="panel-body">
...
<div ng-if="spinner" class="spinner">
...
Whenever you click your button, you are removing every single element in your ng-repeat from the DOM when you $scope.turnOnSpinner(). That's why it appears to jump to the top. It's not really jumping, there just aren't enough DOM elements to fill up the page, making the page so short that the scrollbar disappears (even if it's only for a second). Then when the spinner is done, your ng-repeat fills up the page with DOM elements again, resulting in your scroll position being lost.
So basically what you are trying to fix is a symptom of a less than ideal loading spinner implementation.
ng-if is a "brutal" way of hiding things in Angular. It's mostly meant to hide things for a longer period of time than "softer" directives like ng-show/ng-hide. One solution to your problem is to use ng-disabled on each one of your buttons to prevent the user from interacting with it while the spinner is active, rather than doing a hard removal of each element:
Before:
<div ng-if="!spinner" ng-repeat="item in items" class="panel-body">
<div class="row">
<div class="col-md-9">{{item.itemName)}}</div>
<div class="col-md-3">
<input id="toggleEnabled"
type="button"
ng-class="{'btn-primary': item.enabled}"
value="{{item.enabled ? 'enabled' : 'disabled'}}"
ng-click="toggleEnabled(item)">
</div>
</div>
</div>
After:
<div ng-repeat="item in items" class="panel-body">
<div class="row">
<div class="col-md-9">{{item.itemName)}}</div>
<div class="col-md-3">
<input id="toggleEnabled"
ng-disabled="spinner"
type="button"
ng-class="{'btn-primary': item.enabled}"
value="{{item.enabled ? 'enabled' : 'disabled'}}"
ng-click="toggleEnabled(item)">
</div>
</div>
</div>
Another solution, which I really like and use myself is this Angular module: https://github.com/darthwade/angular-loading
You can attach it to any element in the page and it will put a loading spinner over it and prevent you from interacting with it until your ajax or whatever is done.
If you don't like either of those, try putting your ng-repeat into a container that you can use to prevent interaction with your elements when the spinner is up:
<div class="container" ng-class="{'you-cant-touch-this': spinner}">
<div ng-repeat="item in items" class="panel-body">
<div class="row">
<div class="col-md-9">{{item.itemName)}}</div>
<div class="col-md-3">
<input id="toggleEnabled"
type="button"
ng-class="{'btn-primary': item.enabled}"
value="{{item.enabled ? 'enabled' : 'disabled'}}"
ng-click="toggleEnabled(item)">
</div>
</div>
</div>
</div>
Now you can style it in some way to prevent interaction without having to remove all those items from the DOM:
.you-cant-touch-this {
pointer-events: none;
}
Header Links HTML
<ul ng-controller="pageRouteCtrl">
<li ui-sref-active="active">
<a ui-sref="home" class="" ng-click="getPageId('live-view')">LIVE</a>
</li>
<li>
<a ng-click="getPageId('playback')">PLAYBACK</a>
</li>
</ul>
Ctrl
myApp.controller('pageRouteCtrl', function ($scope, $rootScope) {
$scope.getPageId = function(id) {
$rootScope.route = id;
}
});
Main Page HTML
//should be visible on page load and until playback link is clicked
<div id="live-view" ng-show="route == 'live-view'">
SOME CONTENT
</div>
//will be hidden initially on page load
<div id="playback" ng-show="route == 'playback'">
SOME CONTENT
</div>
The above code works and display <div> content based on link clicked. Subsequently when user clicks on either Live or Playback, div content will be shown.
How do I make live-view div show by default on page load ?
Write following code in controller:
myApp.controller('pageRouteCtrl', function ($scope, $rootScope) {
$rootScope.route = 'live-view';
$scope.getPageId = function(id) {
$rootScope.route = id;
}
});
Im trying to create a navigation bar but i get stuck with this code.
What happens is when i click the menu it navigates to the right page. When i click again the variable is set. But is it possible to set the variable while navigating.
<div>
<nav class="{{active}}" >
<!-- When a link in the menu is clicked, we set the active variable -->
Home
Projects
Services
</nav>
<p ng-hide="active">Please click a menu item</p>
<p ng-show="active">You chose <b>{{active}}</b></p>
</div>
EDIT
I change the header page to this but i still can get it working.
<div>
<nav ng-controller="testController" class="{{active}}">
<!-- When a link in the menu is clicked, we set the active variable -->
<a href="#/" class="home" >Home</a>
<a href="#/second" class="second" >second</a>
<a href="#/third" class="third" >third</a>
</nav>
</div>
css
nav.home .home,
nav.second .second,
nav.third .third{
background-color:#e35885;
}
You can achieve that by listening to location changes and using the ng-class directive :
CSS :
.active, .active:focus{
color: red;
}
HTML :
<div ng-app="testApp">
<div ng-controller="testController">
<div>
<!-- When a link in the menu is clicked, we set the active variable -->
Home
second
third
</div>
</div>
</div>
Javascript :
var app = angular.module('testApp', []);
app.controller('testController', function ($scope, $location, $rootScope, $log) {
$scope.locationsDescriptions = {
'#/': 'Home',
'#/second': 'Second',
'#/third': 'Third'
}
$scope.isPageSelected = function (pageName) {
return $scope.active == pageName ? 'active' : '';
}
$scope.$on("$locationChangeSuccess", function (event, next, current) {
var location = this.location.hash.toLowerCase();
$scope.active = $scope.locationsDescriptions[location];
});
});
I wanted to view different HTML pages based on what a user clicks. For example, I have three tabs set up as so:
<div class="span7" >
<ul class="nav nav-tabs" style="margin-bottom: 5px;">
<li class="active">First</li>
<li>Second</li>
<li>Third</li>
</ul>
<div class="span12" style="margin-left:0;" ng-grid="gridOptions"></div>
</div>
And I merely want to view a different page based off of what the individual clicks. For example, if he clicks First, he will see First's html page where source.sourceObject in the code below denotes which html page to view. It is written like so:
<div class="span5">
<div class="edus-activity-container">
<div ng-show="sourceViewState.selected" class="edus-admin-activities-grid" />
</div>
<div ng-include="'/partials/' + source.sourceObject + '.html'"/>
</div>
where in my javascript file, source.sourceObject is defined based off of if I click the First, Second or Third tab. However, my implementation is not working. I made sure I had no typos in the spelling of my files in source.sourceObject. Any ideas on how to do so?
In your controller:
var pages = { 'one': 'partials/one.html', 'two':'partials/two.html' }
$scope.currentPage = pages['one'] ; //This is required if you want a default page
$scope.first = function(){ $scope.currentPage = pages['one']; }
$scope.two = function(){ $scope.currentPage = pages['two']; }
In your template/HTML
<div ng-include="currentPage"/>