Twitter bootstrap accordion not working with Sammy.js
Is a similar question but was never answered.
I am creating an affixed Twitter Bootstrap side nav-list and using has based href's but when I click on them Sammy is trying to catch the routes. Since I am dynamically creating the Id's and href's I can prevent them from ever matching an existing route but it constantly hits the console with errors. I am sure in production they won't show up but is there anything that can be done to prevent this?
<ul class="nav nav-list affix">
<!-- ko foreach: sections -->
<li class="nav-header"><span data-bind="text: navDesc"></span></li>
<!-- ko foreach: paragraphs -->
<li><a data-bind="attr: { href: '#' + navProp() }"><span data-bind="text: navDesc"></span> <i class="icon-chevron-right"></i></a></li>
<!-- /ko -->
<!-- /ko -->
</ul>
I know this will be fixed in the next version of Durandal but just checking any other options.
Durandal 1.2 provides a guardRoute method, which will allow you to intercept the call before it reaches sammy.
Check out How to handle / ignore a bad route with durandal? for more information.
Related
Even though this is not angular specific in theory it needs to be solved in ng app and none of the examples work. I've seen all the answers in SO but none of those solutions seem to work in real life Angular7 app. For example none of the following work :
<!-- option 1 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
(click)="$event.stopPropagation()">Properties
</a>
<!-- option 2 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
(click)="$event.stopPropagation();false">Properties
</a>
<!-- option 3 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
(click)="$event.preventDefault()">Properties
</a>
<!-- option 4 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
(click)="$event.preventDefault();false">Properties
</a>
Creating a method for handler in component.ts and calling either function with or without returning false does not work either.
In addition, I don't want to disable link because it needs to be draggable / openable in other browser tab/window.
EDIT: Here is https://github.com/angular/angular/issues/21457 and I can make it to work by adding an element inside anchor and have the click for the inside element like this:
(click)="$event.stopPropagation();$event.preventDefault()"
My real world example has mat-icon inside anchor so I use that but in link above a span inside is suggested.
The reason routerLink does not respect preventDefault is described here.
The solution is to create inner element for anchor if there already isn't one (like icon). In the link above a span is created inside but I have icons inside anchors which I omitted from the question for clarity:
<a class="nav-link" [routerLink]='["/map", sessionId]'>
<mat-icon class="tab-nav-item-icon" (click)="$event.stopPropagation();$event.preventDefault()">map</mat-icon>
</a>
I'm trying to make my header with ng-repeat:
From something like this:
<ul class="right">
<li>Início</li>
<li>Sobre</li>
</ul>
To this:
<li ng-repeat="item in menuItems">
{{item.texto}}
</li>
But, since my template is one page, the menu is not working anymore.
Any ideas?
You can use any scroll directive to move to different parts of page.
eg: https://github.com/oblador/angular-scroll
or enable html5mode which will remove # from url and then you can point to page parts using #
Hi guys i am trying to do a knockout statement which changes certain factors if it is classed as true or false. My problem is i need a if and a ifnot statement in the same line to output the correct result.
Example codes:
<!-- ko if: User().loggedin -->
<li><a href="#"><p class="Score">1</p><p style="display:none;"
>First</p></a></li>
<!--/ko-->
Now i need a ifnot statement within that statement as it has a couple of different ways it can go.
<!-- ko ifnot: Goal -->
So how do i mix them both up so they can be outputed on the same line. Example below (which i know doesnt work.) but may get you to understand completely what i want.
<!-- ko if: User().loggedin -->
<!-- ko ifnot: Goal -->
<li><a href="#"><p class="Score">1</p><p style="display:none;"
>First</p></a></li>
<!--/ko-->
<!--/ko-->
All the observable's work fine.
Thanks
Other than massively-confusing indentation, your second example is fine; here it is with the confusion removed:
<!-- ko if: User().loggedin -->
<!-- ko ifnot: Goal -->
<li><a href="#"><p class="Score">1</p><p style="display:none;"
>First</p></a></li>
<!--/ko-->
<!--/ko-->
alternately:
<!-- ko if: User().loggedin && !Goal() -->
<li><a href="#"><p class="Score">1</p><p style="display:none;"
>First</p></a></li>
<!--/ko-->
<!--/ko-->
...assuming Goal is an observable (remove the () if not).
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.
In the context of a ko foreach: widgits I am building list items with a few buttons that expose options to the user.
<ul>
<!-- ko foreach: wigits -->
<li>
<span data-bind="text: $data.text"></span>
<button id="fast" data-bind="click: function(){$root.spinWidget($data, '1000rpm')}"></button>
<button id="medium" data-bind="click: function(){$root.spinWidget($data, '500rpm')}"></button>
<button id="slow" data-bind="click: function(){$root.spinWidget($data, '200rpm')}"></button>
</li>
<!-- /ko -->
</ul>
When I click the first button I see the click handler is invoked each click. When I click or inspect the other buttons i see that no click handler is setup.
the problem ended up being that i had included knockoutjs below jquery, once i moved it above, it works. idk why but it does.