Develop Reference

What is the meaning of folder after hash(#) in the anchor tag?

In the Component Template section of this angular tutorial, they use the following code:
...
<ul class="phones">
<li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp" class="thumbnail">
<a href="#/phones/{{phone.id}}" class="thumb">
<img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />
</a>
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
...
In the anchor tag they use following value for href "#/phones/{{phone.id}}". As far as I know href="#" would jump to the top of page on click. And href="#mydiv" would jump to the element with id mydiv.
I've never seen something like href="#/folder1/myimg.jpg". Is it equivalent to href="/folder1/myimg.jpg"?

Putting the "#" symbol as the href for something means that it points not to a different URL, but rather to another id or name tag on the same page. For example:
Click to go to the bottom of the page
blah blah
blah blah
...
<a id="bottomOfPage"></a>
However, if there is no id or name then it goes "no where."
for more info you can see ...
What is href="#" and why is it used?
But in angularJS it is used for routing the request ... as angularJS provide very good support to built Single Page Application .. the parameter after # used to find out proper page to render ....
here is a nice example .. but you need time to understand it in depth ..

It seems like all anchor events will be interrupted by javascript and perhaps page will be loaded on background using ajax and browser's address line will change but it will not be cause for browser to reload the page. In HTML4 it was unable to change address line without reloading the page. So It's kind of workaround to:
Specify which page should be loaded by js.
Give the user ability to refer to specific page in future or share it.

Google Tag Manager - CSS selector challenge

I am trying to get the URL of a link in the source code. The challenge is that the URL is hidden behind a image, and thus only letting me fetch the image-url.
I've been trying to figure a way to solve this issue by using the new CSS selector in the trigger system and also made a DOM variable that should get the URL when the image is clicked. There can also be multiple downloads.
Here is an example of what I am trying to achieve:
<div>
<div class="download">
<a href="example.com/The-URL-I-Want-to-get-if-top-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
<div class="download">
<a href="example.com/Another-URL-I-Want-to-get-if-middle-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
<div class="download">
<a href="example.com/Last-URL-I-Want-to-get-if-bottom-image-is-clicked.pdf" target="_blank">
<img src="some-download-image.png"/></a>
</div>
</div>
There are much code above and below this snippet, but with the selector it should be fairly easy to get the information I want. Only that I don't.
If anyone have met this wall and solved it, I really would like to know how. :)

This is one possible solution. So as I understand it, you would like to grab the anchor element's href attribute when you click the "download" image.
A Custom Javascript variable would need to be created so that you can manipulate the click element object:
function(){
var ec = {{Click Element}};
var href = $(ec).closest('a').attr('href');
return href;
}
So you will need to do your due diligence and add in your error checking and stuff, but basically this should return to you the href, and then you will need to parse the string to extract the portion that you need.

How to conditionally add attributes to an element using Angular? (Not only attribute data, the whole attribute)

I have some links created with angular material. In there for links and buttons we us <md-button>. Now I have a link and I need to add the href attribute to it only if the url is present. Otherwise it should not have a href.
The reason is, I have main links and sub-links underneath. Main links which have sub-links can't have an href. If it does have at least and empty href, as soon as I click it to expand the sub-links, it will take me to the index template. There are main links which don't have any sub-links. So, for them I need the href and for the links with sub-links I need to completely remove the href. How can I do this?

I am not an expert in angular, but if I am correct, for Angular 1.3 and above:
<a ng-attr-href="{{href || undefined}}">Hello World</a>
for the versions below 1.3, I guess you can do:
<a ng-if="href" ng-attr-href="{{href}}">Hello World</a>
<a ng-if="!href" >Hello World</a>
personally, I do not like the second method because it leads to code duplication.
answer taken from this post

You can add the href attribute in the directive's link function
return {
scope : {
link : '=myLink'
},
link: function(scope, elem) {
if (scope.link.url) {
elem.attr('href', scope.link.url);
}
}
}
Usage:
<a my-link="l" ng-bind="l.name"></a>
http://plnkr.co/edit/p8PsWosSPmGlTjrjSN9S?p=preview
If it fits your needs you could also go with ngHref as Chandermani noted. It doesn't add href if its undefined.
<a ng-href="{{l.url}}" ng-bind="l.name"></a>

You usually use a multiple elements with combination of ng-if with the inclusion/exclusion of the attributes on the corresponding element. For e.g consider a table row which has to show a link like Edit and suppose its attribute is meant to be added on say some boolean field foo.
<tr ng-repeat="item in items">
<td>
Edit
Edit
</td>
<!--other columns -->
</tr>
Plunk: http://plnkr.co/edit/G4aTyxQdbeJdWwtmu91t?p=preview

Way to trigger FancyBox by clicking on <div> rather then <a>?

I am having issues with my CMS - its seems it doesn't like having an <a> tag within an <a> tag as my Fancy Box 2 set up has.
To test I replaced:
<a class="fancybox" href="#popup">
with
<div class="fancybox" href="#popup">
This solved my original issue, but because its not legitimate mark up and breaks a lot of the other code.
Would anyone know a correct way to modified Fancy Box 2 to do this?

You can always bind fancybox to any element other than the <a> tag with a valid (HTML5) structure and functionality, using the special fancybox's data-* attributes like :
<div class="fancybox" data-fancybox-href="#popup">open fancybox</div>
See JSFIDDLE

Make Colorbox Load one Image at a time

Im using the jQuery Colorbox plugin to load some images on the page. My issue is, colorbox will naturally take multiple instances in the same Div, and then allow the user to scroll through the images with the arrow buttons.
I would like to have colorbox just load each image individually, without creating a separate instance/class of colorbox for each image.
Example Code:
<a href="../../images/rd/demo/1.3.png" class="group2" ><img src="/images/rd/demo/2.png" /></a>
<a href="../../images/rd/demo/1.3.png" class="group2" ><img src="/images/rd/demo/2.png" /></a>
<a href="../../images/rd/demo/1.3.png" class="group2" ><img src="/images/rd/demo/2.png" /></a>
$(".group2").colorbox({
rel:'group2',
transition:"fade",
opacity:0.50,
innerWidth:650,
innerHeight:400,
arrowKey: false
});
If I click on one of the images/links above, colorbox will load all three and allow the user to tab through them. I just want each image loaded individually, without having to give each one a unique class id.
I checked the Colorbox Documentation, and did not see anything that helped my case.

I think you just need to remove this:
rel:'group2',
According to the docs, that's what is causing it to group them together.

have you tried $("a.gallery").colorbox({rel:"group1"}); that should over-ride the default grouping?