2014-01-20 13 views
12

というAngularJSディレクティブの属性としてon-drag-startを属性として使用したかったのです。
しかし、その属性を持つことはできないようです。angularjsディレクティブは "-start"で終わる属性を取得できません

次のコードは、純粋なjavascriptにあり、on-drag-startを属性として取得できます。 属性名に関係なく、任意の属性を取得できると思います。純粋javasctiptのDEMOで

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

属性:http://plnkr.co/edit/6iODSnf56KtwPFpoC7ck?p=preview

しかし、AngularjSで次のコードでは、私は属性としてonDragStartを取得することはできませんが、属性としてonDragBeginを得ることが可能です。 AngularJSディレクティブのDEMOで

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

属性:もちろんhttp://plnkr.co/edit/RxABAHHlxQJSSZz91CYW?p=preview

、私はon-drag-startからon-drag-beginに自分の属性名を変更することができますが、私は好奇心旺盛です。

私の質問は次のとおりです。

  1. なぜ属性名としてon-drag-startを使用できないのですか?
  2. どうしたのですか?
  3. 属性名には一般的な規則はありますか?

注:私の質問は整形されていないと感じます。書き換えは歓迎されます。

+4

[サポートマルチエレメント指令](https://github.com/angular/angular.js/commit/e46100f7097d9a8f174bdb9e15d4c6098395c3f2)を追加した結果、これに関するgithubの問題は次のとおりです。 "または" end "](https://github.com/wzr1337/angular-gestures/issues/6) – KayakDave

+1

私は同じ問題を抱えていて、それを理解するのに多くの時間を無駄にしました。私が読んだ限り、それは意図的であり(リリースノートで言及した)、バグとして認識されませんでした。私の意見では、それは非常に悪いデザインの決定です。彼らは接尾辞としてそのような共通の用語を選んではならない。 – Kapep

+0

私は同じ問題を抱えていました。接尾辞を使用したり、始めることができませんでした。しかし、私が知っている唯一の修正点は、hmDragStartの代わりにhmDragstartを使用することです。 (http://github.com/wzr1337/angular-gestures) – wzr1337

答えて

6

This was broken in 1.2。属性の名前を変更して移動するのが最善です。

+0

はい、私は名前を変更していきます。質問によれば、名前の変更は機能します。これがバグか意図的なのか不思議です。あなたのリンクはそれがディレクティブ用だと言っていますが、私の用法はディレクティブ用ではなく属性用です。これはバグのようですが、AngularJSチームの意図はすべての "-end"サフィックスを予約することです。 – allenhwkim

+0

クレイジー。 '-start'がたくさんのディレクティブに役立つようです。これを指摘してくれてありがとう。この制限は、AngularJSドキュメンテーションの他のどこにでも記述されていますか?もしそうでなければ、確かにそうすべきです! – mg1075

0

私はちょうどこの正確なことに遭遇しました。私は指示を間違っていたかどうかを試してみるのに1時間ほどかかりました。私はタッチ・イベント・ディレクティブを実装していて、それをdac-touch-startと命名し、なぜ発火しなかったのか、困惑しました。最終的に私は、「スタート」という言葉は責任があることを理解しました。

角度ソースを調べると、指示名に "start"と "end"という単語があるようです。

これは、テンプレートのディレクティブをディレクティブ定義にリンクする関数です。

/** 
* 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); 
} 

これは、このようなng-repeat-start ... ng-repeat-endなどのディレクティブをサポートすることができるようであるように思われます。

@ mmattaxが示唆するように、行うべきことはちょうど別の名前を付けることです。

+0

これは赤い太字で文書化されなければならないと思います。 – allenhwkim

0

だから、coughcough軽く(追加の)スタートを追加するのが回避策です。

すなわちon-drag-start-start="onStartCallback()"です。

マークアップの属性on-drag-startが になり、角度1.2.10で機能するように見えます。

あなたの走行距離は異なる場合がありますが、私は他の不正行為もチェックしていません。

関連する問題