I wanted to use on-drag-start
as an attribute in AngularJS directive, called ngDraggable
.
However, it seems not possible to have that attribute
I just ran into this exact thing today and I wasted an hour or so trying to figure out what was wrong with my directive. I am implementing a touch event directive and I named it dac-touch-start
, and was baffled why it did not fire. Eventually I figured out that the word "start" was to blame.
Looking through the Angular source, it seems there is a special provision for the words "start" and "end" in directive names.
This is the function that links the directives in your templates to the directive definition.
/**
* Looks for directives on the given node and adds them to the directive collection which is
* sorted.
*
* @param node Node to search.
* @param directives An array to which the directives are added to. This array is sorted before
* the function returns.
* @param attrs The shared attrs object which is used to populate the normalized attributes.
* @param {number=} maxPriority Max directive priority.
*/
function collectDirectives(node, directives, attrs, maxPriority, ignoreDirective) {
...
var directiveNName = ngAttrName.replace(/(Start|End)$/, '');
if (ngAttrName === directiveNName + 'Start') {
attrStartName = name;
attrEndName = name.substr(0, name.length - 5) + 'end';
name = name.substr(0, name.length - 6);
}
This appears to be so that directives such as ng-repeat-start
... ng-repeat-end
can be supported.
As @mmattax suggests, the thing to do is to just name it something else.
This was broken in 1.2. It's best to rename the attributes to something else and move on.
So, coughcough it appears that appending a frivolous (additional) -start is a workaround.
i.e. on-drag-start-start="onStartCallback()"
.
results in an attribute of on-drag-start in the markup, and it appears to work, on angular 1.2.10.
Your mileage may vary, and I haven't checked for any other misbehavior.