javascript - Angularjs - 属性等于值

Question

有人知道为什么如果我这样做'drawStock =“drawStock'”

<tr ng-repeat="icl in ic.internal_consumption_lines" drawStock="drawStock(locator_id, product_id)" ...></tr> 

然后在我的脚本中

scope: { 
...
drawStock: "&",
...
},
template:{
...
<span>{{drawStock({locator_id:ic.internal_consumption_lines[index].transaction.locator.id, product_id:ic.internal_consumption_lines[index].transaction.product.id})}}</span>
...
...
$scope.drawStock = (lid, pid) ->
for i of $scope.product_stocks
  if $scope.product_stocks[i].locator_id == lid
    if $scope.product_stocks[i].product_id == pid
      return $scope.product_stocks[i].stock

drawStock 函数不会显示股票，但如果我将属性更改为与值不同的名称，比如 'drawstock="drawStock(...' 它可以工作...:

<tr ng-repeat="icl in ic.internal_consumption_lines" drawstock="drawStock(locator_id, product_id)" ...></tr> 

然后在我的脚本中

scope: { 
...
drawstock: "&",
...
},
template:{
...
<span>{{drawstock({locator_id:ic.internal_consumption_lines[index].transaction.locator.id, product_id:ic.internal_consumption_lines[index].transaction.product.id})}}</span>
...
...
$scope.drawStock = (lid, pid) ->
for i of $scope.product_stocks
  if $scope.product_stocks[i].locator_id == lid
    if $scope.product_stocks[i].product_id == pid
      return $scope.product_stocks[i].stock

Answer 1

根据the docs :

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

The normalization process is as follows:

1. Strip x- and data- from the front of the element/attributes.
2. Convert the :, -, or _-delimited name to camelCase.

<小时/>

就你而言，当 Angular 看到 drawStock: "&" 时它将其理解为 drawStock: "&drawStock" ，这会误导它寻找 draw-stock在您的 HTML 中。
又因为没有draw-stock (但仅限 drawStock )在您的 HTML 中，它不起作用!

如果您想在 HTML 中使用驼峰形式(例如，因为您发现它更具可读性)，并且由于 HTML 不区分大小写，您应该 (1) 明确指定属性的名称或 (2) 在您的 HTML 中使用小写形式指示。例如:

HTML:<tr ... drawStock="..."> // (this is camelCase)

指令 (1):scope: { drawStock: '&drawstock' } // (1st camelCase, 2nd lowercase)指令 (2):scope: { drawstock: '&' } // (this is lowercase)
_{(以上两个指令均引用“camelCased”HTML 属性)}