I want to re-render all the views present on my page.I have Header, Footer and Body view. In Header view i have a dropDown in which user can select the Language Preference. On clicking on language prefrence all the view should be re-render. Is it Possible in Angular?
In BackboneJs i simply call the render function again on that particular event. Is there some same kind of functionality provided by AngularJs?
Thanks in Advance
Header Template (language Prefrence Dropdown Code)
<li class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#">
Language Preferences<b class="caret"></b>
</a>
<ul class="dropdown-menu dropdown-manual">
<li id="English" ng-click="englishConversion()">English</li>
<li id="French" ng-click="frenchConversion()" >French</li>
</ul>
</li>
is there any inbuilt function which i can call in englishConversion and frenchConversion to re-render the view/views?
Have you looked at the angular-getText libary ,
Or you can $compile the HTML using angular again. You can simply do like this,
var content=angular.element('#translatedContent');
var scope=content.scope();
$compile(content.contents())(scope));
Related
I am trying to create a dashboard where dashboard is abstract state and subdashboard is the very next child state for the dashboard.
Here view details of users use to go to state dashboard.tables. But the problem is that, the html element li is not opening / getting active.
Though the state is changed, that particular element is not getting active which is under datatables
In the above image, I have done manually open to just illustrate my query.
That is click / change of any state should be get active in the side menu and show as active. Any help will be great
Here is my code,
<li class="has_sub">
<i class="md md-view-list"></i><span> Data Tables </span><span class="pull-right"><i class="md md-add"></i></span>
<ul class="list-unstyled">
<li ui-sref-active='{"active": "dashboard" }' ><a ui-sref="dashboard.tables">Tables</a></li>
</ul>
</li>
Here are my routes
r.state("dashboard",{abstract:"true",templateUrl:"partials/dashboard.html"})
r.state("dashboard.subdashboard",{url:"/dashboard",templateUrl:"partials/subdashboard.html"})
r.state("dashboard.tables",{url:"/tables",templateUrl:"partials/tables.html"});
Also as said by LouieAlmeda I have written, but as it wont work i removed it.
and also ng-class i have tested but no use
Can you try:
<li ui-sref-active='{"active": ".dashboard" }' ><a ui-sref="dashboard.tables">Tables</a></li>
I have treeview menu where I would like to remember its state after page reloads. To reload page I'm using angularJS function $state.reload();
I don't know should I use Jquery to collect cookies about current state of menu and save it, or maybe there is a way to collect data about current state using angular.
Any ideas and suggestions would be highly appreciated.
Here is my HTML
<nav class="side-nav" id="menu">
<ul>
<li class="side-nav-item">
<a href="/index">
<i class="nav-item-icon icon ion-ios7-navigate-outline"></i>
Main page
</a>
</li>
<li class="side-nav-item collapsable">
<a href="javascript:void(0);">
<i class="nav-item-icon icon icon ion-chevron-right"></i>
1. subitem
</a>
<ul style="display:none;">
<li class="side-nav-item">
<a ui-sref=".countiesandtowns">
<i class="nav-item-icon icon ion-clipboard"></i>
2. subitem
</a>
</li>
</ul>
</li>
</ul>
And here is JQuery I'm using
$(function () {
$(document).ready(function () {
$("#menu").treeview({
toggle: function() {
var element = $(this).find(">a>i");
if (element) {
var rightElement = element.hasClass("ion-chevron-right");
var downElement = element.hasClass("ion-chevron-down");
element.removeClass("ion-chevron-right");
element.removeClass("ion-chevron-down");
if (rightElement)
element.addClass("ion-chevron-down");
if (downElement)
element.addClass("ion-chevron-right");
}
}
});
});});
It sounds like cookies are what you want here. Check out this W3C spec on cookies, no jQuery required!
Once you save the cookie, after a page reload just check the state of the cookie and display the menu based on that
I think your best option will be to consider using window.localStorage with a cookie fallback. In fact, if you are using angular you may even consider using angular-local-storage which can be seen here.
angular-local-storage provides the cookie fallback for you but this isn't too hard to implement yourself and just requires a check for whether window.localStorage is defined.
Hope that helps you out!
I am using a bootstrap dropdown, I want to focus on the dropdown so I can use keyboard to navigate over the list. What is the way to do it using jquery?
I tried to use $('#myULid').focus() and this is not working.
I am able to open the dropdown, but not focus on it.
<button id="time_btn" type="button"
class="btn btn-reverse dropdown-toggle"
data-toggle="dropdown">
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="item in items" ><a><span>test</span></a></li>
</ul>
just add
<ul tabindex='1'>
....
</ul>
then add the .focus() method
There is an excellent article "Accessible Dropdown Menus" all about the various ways to do this at http://terrillthompson.com/blog/202
It includes examples of various methods. One of the simplest can be seen at http://staff.washington.edu/tft/tests/menus/dropperdown/index.html. It is a pure CSS solution (no JavaScript) that was billed on it's invention as "the world's most accessible dropdown menu.".
However other more advanced methods are demoed as well. I hope it provides everything you need.
I would like to combine AngularJS and Twitter Bootstrap into a fresh web app. It seems like AngularJS directives have been written for Bootstrap.
However, on careful look, it seems that these directives don't cover all of Bootstrap. Can I combine both the AngularUI Bootstrap code with the original Bootstrap to get completeness? Can it be done in the first place?
I stumbled on another Angular project called AngularStrap. Can I combine all three?
What is the best way to combine AngularJS and Twitter Bootstrap to get completeness?
Generally, the CSS part of Bootstrap works exactly the same way with AngularJS as it works with the Bootstrap JavaScript. So as long as you only want to use Bootstrap CSS, you do not have to think about it.
For almost all of the Bootstrap JavaScript functionality, AngularUI provides an alternative approach. E.g. the navbar in general works with CSS only, so just look at the Bootstrap docs and implement it. If you require some responsive features for the navbar, you will require the collapse directive; for an example see here: angular-ui navbar
So if you think anything is missing in AngularUI, could you please be more specific with "are not complete enough to cover the entire Twitter Bootstrap"? I do not have the impression that there is a general gap.
Moreover, http://angular-ui.github.io/bootstrap/ is the most mature library for the task. So if you think there are features missing, I would strongly recommend to patch it and make a pull request.
The code can be combined by writing your own Angular directives which generate HTML that has Bootstrap classes. I am working on a similar web application that combines Bootstrap with Angular. What I did there, was something like this:
app.directive('trackerMenu', function(){
return {
restrict: 'E',
templateUrl: "partials/menu.html"
};
});
And the content of menu.html is:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" ng-show="auth">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand">Issue Tracker</a>
<ul class="nav navbar-nav">
<li class='toggleable'>
<a ng-click="navigate('dashboard')"><i class="fa fa-home"></i>Dashboard</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('tasks')"><i class="fa fa-tasks"></i>Tasks</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('bugs')"><i class="fa fa-bug"></i>Bugs</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('statistics')"><i class="fa fa-bar-chart-o"></i>Statistics</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('team')"><i class="fa fa-users"></i>Team</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('profile')"><i class="fa fa-user"></i>Profile</a>
</li>
<li class='toggleable'>
<a ng-click="navigate('settings')"><i class="fa fa-cog"></i>Settings</a>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
</div>
</form>
<ul class="nav navbar-nav">
<li>
<a ng-click="logout()"><i class="fa fa-power-off"></i>Logout</a>
</li>
</ul>
</div>
</div>
</nav>
And the directive is used like this:
<body ng-class="togglePadding()" ng-controller="RootCtrl">
<tracker-menu></tracker-menu>
</body>
Basically, what my directive does is to inject a Bootstrap navbar into a page.
Angular Strap supports navbar, also speaking from experience you can mix ui boostrap with angular strap on a module by module basis. Both Projects allow you to inject their components for a custom build like so:
angular.module('myApp', [
'mgcrea.ngStrap.modal',
'mgcrea.ngStrap.aside',
'ui.bootstrap.popover'
]);
However, they can and will conflict with each other. I.E you cannot have the ui-bootstrap modal and the angular strap modal in the same project. Additionally, some of the directives from both projects have dependencies on other modules for example, the Angular Strap date picker has a dependency on the tooltip directive.
I am having issues getting a dropdown to be bound properly in an ember js app because I have action handlers on click inside of the list and the foundation events are conflicting.
Template name:
<a data-dropdown="groupDrop" id="groupDropdownLink" class="button radius tiny success dropdown">
Move Selected To Group ({{selectedCount}})
</a>
<br>
<ul id="groupDrop" data-dropdown-content class="f-dropdown">
{{#each eventGroups}}
<li {{action 'moveToGroup' this}}><a>{{name}}</a></li>
{{/each}}
</ul>
When I run $(document).foundation() it overrides the action handlers, and when I remove that it doesn't trigger the dropdown.
What I think I need to do is add some action handler to the a tag and then have it open up the dropdown, so I can not use the foundation handlers.
The function you need to use to trigger the dropdown is Foundation.libs.dropdown.toggle
You pass in a jQuery object of the dropdown link to toggle it
You can solve it like this:
template:
<a data-dropdown="groupDrop" {{action 'showDropdown'}} id="groupDropdownLink" class="button radius tiny success dropdown">
Move Selected To Group ({{selectedCount}})
</a>
<br>
<ul id="groupDrop" data-dropdown-content class="f-dropdown">
{{#each eventGroups}}
<li {{action 'moveToGroup' this}}><a>{{name}}</a></li>
{{/each}}
</ul>
controller:
Ea.GroupGuestsController = Em.ArrayController.extend
actions:
showDropdown: ->
Foundation.libs.dropdown.toggle($('#groupDropdownLink'))