Develop Reference

Mysterious div being appended to hyperlinks

We run a Ruby on Rails 3.2 web application that uses a standard mix of rails and jquery.
Recently, we noticed a strange div element appearing in our production code. It seems to only show up when we render views with strings that also contain hyperlinks.
Here's an example:
We have a string in our view, that we want rendered as HTML:
"Try to search <a href='/search?q=hiring'>hiring</a>"
When we render the page in production though, we get the following:
"Try to search <a href="azarvuttcexyytzq.html" id="qqqqtra" rel="file">trufarwdstrzyzdyw</div>."
We're not sure why but the following div is being appended to our link:
<div style="display: none;">trufarwdstrzyzdyw</div>
What's strange is that we don't think that the file azarvuttcexyytzq.html exists on our servers, and we also found out that "file" is not an acceptable rel value for a hyperlink's relation attribute.
So, where could the div be coming from?
One thought is that it is coming from some analytics library in our system, since we're using Google Analytics. But we can't seem to confirm that idea or rule it out.
Does anyone know of a library that causes behavior like this?
Any help or insight would be appreciated.

If there is no developer who has done this (intentionally or otherwise) by appending a div with a random hyperlink in your application, then there is a high probability that your application server, some library or a gem you are using is compromised. It would be good to do an audit of your code/server and ensure that you are using the original version of all the gems and libraries and no malicious code is otherwise included in your app code.

We had the exact same issue, although intermittently, and it was Distil networks injecting in our case. To verify we took Distil out for the site and it worked like a charm!
Although, have yet to find how to get it working with Distil, will update the answer if/when we do

We had the same issue, our application behind Distil as well as in other comments.
If you use Distil, read this:
https://help.distilnetworks.com/hc/en-us/articles/235705127-Optimizing-Honeypot-Links-for-Pages-with-Inline-JavaScript
In short: Add the following comment near the top of your page (and above the JS) to force Distil injection to happen there: </a> -–> You can also add any other custom, a unique comment which Distil could use to inject the honeypot link code into.

wise way to use angular-ui tab to have multiple dynamic content

What I want is each of tab consist of its dynamic content, but now I doubt I was doing it correctly when I put ng-view within ng-repeat.
Here is a working version to push http://plnkr.co/edit/19sAXoEW4HZ9G7CT7R3a?p=preview . So in the beginning it was fine for me.
But after that I felt I've to load some data, the tab no longer working working when I do $scope.tasks = tasks
which tasks is a object in data.js. Here is the error : http://plnkr.co/edit/jbxypSlvk3rYlFAIHygo?p=preview

You are missing quotes on active=tab.active change to active="tab.active".
Which causes the
Error: The string contains invalid characters.
Why are you shoe-horning tabs here. I think a simple nav would do. The underlying issue is your design is fundamentally flawed, you can only have one ng-view on a page. If you update your post I can recommend a solution.

AddThis not playing nice with Angular?

My site recently had the social buttons break without any changes to the code.
I'm using AddThis for the sharing buttons, with Angular on the front-end.
I'm passing in the data for each entry using
<div data-addthis-toolbox ng-tap="socialShare = !socialShare" class="addthis_toolbox addthis_default_style addthis_32x32_style"
This appears to be working because it renders in DevTools

I guess your problem is from some change in addThis js snippet. but we really can't know. Two suggestion that might help:
play with the directive priority (I don't think it's the issue, but you should rule this out)
replace data-title="{{article.title}} via discoverwiki.com" with:
ng-attr-data-title="{{article.title}} via discoverwiki.com"
as explained here (I believe this is the problem..)

other than ng-view page loading

I am using a master page having navigation and ng-view on it, partial pages loading successfully under ng-view and with navigation of master page , but I require to load some isolated page like login.html page but not under ng-view and without master page content during route.
I am new on angular and not sure how to do this, login page loaded every time under ng-view.
Please suggest me any way to do this.
Thanks in advanced.

ng-include is your friend. see doc
here is simple way, but you should go to doc and see that there are extra options as to what can be done onload and if you want to autoscroll or do some kind of animation.
<div ng-include="'somefile.html'">
</div>
The one extra note is that ng-include is given an expression so if you have a static reference you need the extra quotes.

One of the great things about Angular is it is very flexible. Ultimately it will depend on your app and how you work. I'm not exactly certain what you are trying to accomplish but, it sounds like a job for the ngInclude directive as Dan mentioned.
You mention a login.html that excludes navigational and other main page content. Using a modal may be a viable alternative interface decision.
If you have everything built and you only want to hide part of the DOM and be done with it then, nghide or ngShow may be the quickest solution.
If there is a lot of stuff on your index.html you may want to separate those things into partials other than the ones connected directly to your routes, and use ng-include="'path/to/partial.html'" to include them. (The "''" are intentional as it likes a string.) Read the docs and experiment with the plunkr. You can do a lot of cool things with ngInclude, especially if you pay attention to its context.
If you combine the ngInclude directive with ng-switch-when, you could put together something like:
<div ng-switch="routeAction">
<div ng-switch-when="extpage" ng-include="'extraneous.content.html'"></div>
<div ng-switch-when="login" ng-include="'login.partial.html'"></div>
<div ng-switch-default ng-include="'default.tpl.html'"></div>
</div>
Where routeAction is tied to your controler which, is tied to your $route or $location.. depending on how you have things set up.

angularjs "node is undefined" error in Firebug when moving templates into main html file

I'm working on a landing page that is written largely with Angular JS 1.0.2. Upgrading to a later version may not be in the cards, at least not right away. It's working fine, but we're trying to do a bit of optimization. For a bit of background, we have a number of directives set up for various modal windows and other custom elements on the page. These use tempateUrl parameters and grab them from separate html files which contain all of the necessary HTML. Quick and dirty example as there's way too much code for me to post a full one:
Landing page html:
<div help-menu />
Angular directive:
module.directive('helpMenu', function(){
templateUrl: helpMenu.html,
controller: ...
link: ...
});
Where helpMenu.html contains simple html for the element in question.
This hasn't been a problem, but the number of html files keeps going up and I'd like to merge them into the main html file for the landing page to reduce the number of GET requests. Doing so basically involves snipping the HTML from each of the files and placing it at the end of the landing page html file (while wrapped in a div with an id to grab). The directive is changed to use:
template: $('#helpMenu')
This works just fine if helpMenu contains no angular code. However, I get a "node is undefined" or "linkNode is undefined" error in Firebug if I the html contains any angular code, ie, an ng-repeat, ng-show, etc. The odd thing is that everything works as expected despite the error, but I'd really like to get rid of it regardless.
I've tried a few ways to fix this (attempting a $compile at various points hasn't helped), but with no success, and there is very little information on this particular error. I'm baffled as to why it's a problem when the html that comes in will be identical in both methods. Perhaps template and templateUrl handle things differently?