2013-05-12 88 views
33

從第一視圖看起來像data-ng-click可以傳遞一些數據作爲參數,方法應該在按下按鈕期間調用。angularjs中的ng-click和data-ng-click有什麼區別?

但我沒有看到區別。

我遵循的代碼片段:

HTML

<input 
    type="button" 
    value="Fess" 
    ng-click="toggle(2)"> 

OR

<input 
    type="button" 
    value="Fess" 
    data-ng-click="toggle(2)"> 

JS

$scope.toggle = function (valueS) { 
    alert(valueS);   
} 

這兩個工作。

謝謝,

回答

32

他們是同樣的事情。您可以使用data-ng-click來製作有效的html。

+1

嗯,我看不到'ng-click'上的任何錯誤或警告。 – 2013-05-12 09:23:05

+9

如果你通過html驗證器傳遞它,你將會得到'屬性ng點擊不允許在這個點輸入。雖然'data-ng-click'在html5中是一個有效的屬性。 – NARKOZ 2013-05-12 09:47:22

11

angular docs on directives

指令有駱駝套管的名稱,如ngBind。該指令可以是 ,通過將駝峯案例名稱翻譯爲蛇案,並使用這些 特殊字符:, - 或_來調用。該指令可以是 ,前綴爲x-或data-,以使其符合HTML驗證器。這裏的 是一些可能的指令名稱列表:ng:bind,ng-bind, ng_bind,x-ng-bind和data-ng-bind。

將它們排除在外對於實踐目的來說是完全不錯的。只是,如果你通過html驗證器服務運行它,它不會作爲complliant傳遞。

3

HTML5具有嵌入自定義的數據屬性上的所有HTML元素

這些新的自定義數據屬性由兩個部分組成的能力:

屬性名稱 數據屬性名必須至少有一個字符長,並且必須以'data-'爲前綴。它不應該包含任何大寫字母。

屬性值 屬性值可以是任何字符串。

<li data-spacing="30cm" data-sowing-time="February to March">Celery</li> 

源:在有和沒有使用表格http://html5doctor.com/html5-custom-data-attributes/

1

實測值的差。

當我的元素在窗體中時,它們的行爲相同。

當我在表單中使用data-ng-click時,Click事件沒有發生。