angularjs directive cannot get attributes ending with “-start”

问题

I wanted to use on-drag-start as an attribute in AngularJS directive, called ngDraggable.
However, it seems not possible to have that attribute.

The following code is in pure javascript, and I can get on-drag-start as an attribute. I think I can get any attribute regardless of attribute name.

<h1 id="tag1" on-drag-start="START" on-drag="DRAG" on-drag-end="END" >Hello Plunker!</h1>

Attributes in pure javasctipt DEMO: http://plnkr.co/edit/6iODSnf56KtwPFpoC7ck?p=preview

However, in the following code in AngularjS, I cannot get onDragStart as an attribute, but it is possible to get onDragBegin as an attribute.

<h1 id="tag1" ng-draggable  on-drag="DRAG" on-drag-end="END"
  on-drag-start="START" on-drag-begin="BEGIN">Hello Plunker!</h1>

Attributes in AngularJS directive DEMO: http://plnkr.co/edit/RxABAHHlxQJSSZz91CYW?p=preview

Of course, I can change my attribute name from on-drag-start to on-drag-begin, but I am curious.

My questions are;

why I cannot use on-drag-start as an attribute name?
what's the reason behind it?
and, is there any general rule for attribute names?

NOTE: I feel my question is not well formatted. Rewriting is welcomed.

回答1:

This was broken in 1.2. It's best to rename the attributes to something else and move on.

回答2:

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.

回答3:

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.

来源：https://stackoverflow.com/questions/21242444/angularjs-directive-cannot-get-attributes-ending-with-start

标签

angularjs

angularjs-directive