How to ignore specific links from routing? - angularjs

I am using Angular 1.3.14 with Angular Route.
Now, I have some specific links like this one:
<a target="_self" ng-href="#next" role="menuitem">Next</a>
And on this link there is a jQuery plugin attached, that opens/closes the accordion. Now currently, it just takes AngularJS routing into effect and redirects me to /#next. How can I disable that ?
I have tried setting target="_self", but no luck.

Related

jQuery doesnt work with AngularJS ng-route view

I have four html pages that I want to inject in my index.html using AngularJS ngRoute.
I have a carousel on hairstyle.html and a photo zoom-in jquery on salon.html, both do not work on angularjs route.
How do I make my jquery code work on AngularJS ngRoute view?
Here is the link to my codes: https://embed.plnkr.co/wyoVtQ/

ng-animate with ui-router when using $state.go

I'm using Angular 1.2.18, ng-animate 1.2.18 and ui-router 0.2.10 (but I've tried with latest build from git repo). When I enable animations and define my transition css, it all seems to work fine, if state change is triggered by clicking link with href / ui-sref. But when I use $state.go('mystate'), it does change the state properly as always, but the transition is not playing at all.
All those libs even compatible with each other?

Hover Dropdown JS does not work with my Angular JS Setup

I am using a Bootstrap 3 based template called Unify and implemented Angular JS with ui-routing. Most of it works fine. Just my whole navigation is in the header and I use ng-include to inject the header from a html template file. Them the hover dropdown js plugin does not work anymore. My Code looks something like this.
<header ng-include="'templates/header.html'"></header>
<!--=== Content Part ===-->
<div class="container">
<div class="row" >
<div ui-view autoscroll="false"></div>
</div>
<footer ng-include="'templates/footer.html'"></footer>
and the plugin is called before the tag with the rest of scripts needed.
It works fine when I use the files as is without the Angular JS it also works fine with Angular JS if I don't inject the code but leave it in the index.html as is but not as now.
Hopefully somebody can help me out because I have the same problem with the parallax slider with for convenience sake I just keep in the index.html for now.
Thanks,
Gerd
Thanks to the detailed answer Chris T gave me in another question I found it is a scope related issue. Now I am loading the hover dropdown js within the template file and it works fine.
I ran into the same issue, and tried loading the hover dropdown js in a script tag in the template. That resulted in an error (Like the one here: Can AngularJS ng-include load a Jinja2 processed html on FLASK?)
So instead of doing that, I got it to work by creating a controller for my template and inside the controller I added the drop down hover via:
$('.dropdown-toggle').dropdownHover(options);

angular-ui-router 0.2.7 nothing showing on page

I need help. I build web app with angularjs 1.2.5 and angular-ui-router. When I use angular-ui-router v0.2.0 all works fine. But when I have upgraded angular-ui-router to v0.2.5 or v0.2.7 I see empty page. At chrome DevTools console I see that all templates run but nothing showing on page. And are no errors in DevTools console.
I had the same experience moving from v0.2.0 to v0.2.7. Removing ng-cloak from the ui-view element was the solution in my case.
I changed
<div ui-view="page-wrapper" class="ng-cloak" ng-cloak></div>
to
<div ui-view="page-wrapper"></div>
I moved ng-cloak to the template.

Custom angular version in jsfiddle

How can I load a custom angular version into jsfiddle?
I want to use version 1.1.5 and not 1.1.1.
I would appreciate a working jsfiddle example.
Go into the External Resources Tab in the left sidebar:
Then add the url for a CDN that hosts Angular 1.1.5 http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js:
Click the "+" button and you are all set:
UPDATE
Also, don't forget to set the framework to "No-Library (pure JS)" unless you want to use another framework such as jquery. Just don't set it to another version on angular
UPDATE
Here's a JSFiddle with Angular 1.1.5 working
http://jsfiddle.net/QFNLW/
In the left side bar, in "External Resources", add a link to the AngularJS library. For example from the Google CDN:
http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js

Resources