Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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;

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

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

like image 253
allenhwkim Avatar asked Jan 20 '14 19:01

allenhwkim


People also ask

What is restrict in AngularJS directive?

Note: When you create a directive, it is restricted to attribute and elements only by default. In order to create directives that are triggered by class name, you need to use the restrict option. The restrict option is typically set to: 'A' - only matches attribute name.

How directive works in AngularJS?

AngularJS directives are extended HTML attributes with the prefix ng- . The ng-app directive initializes an AngularJS application. The ng-init directive initializes application data. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

How to call directive in AngularJS?

Inside the directive it is creating an updateMap() method on the scope object in the directive and then calling the setFn() method which is mapped to the $scope. setDirectiveFn() method by this line: <map set-fn="setDirectiveFn(theDirFn)"></map> in your HTML and this line: scope: { setFn: '&' } in your directive.


1 Answers

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

like image 199
mmattax Avatar answered Nov 11 '22 08:11

mmattax