Angularjs - attribute equal to value

Question

Does someone know why if I do 'drawStock="drawStock' like

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

And then in my script

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

The drawStock function won't display the stock, but if I change the attribute for a different name than the value, let's say something like 'drawstock="drawStock(...' it works...:

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

And then in my script

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

What is the difference between the upper snippet and the lower snippet ? They seem identical to me... — gkalpak
– gkalpak, Commented Jan 23, 2014 at 18:53
drawStock="drawStock vs drawstock="drawStock, watch the upper case "S", which makes the difference between the attribute and the value. — tomascharad
– tomascharad, Commented Jan 23, 2014 at 22:35

gkalpak · Accepted Answer · 2014-01-25 15:51:27Z

According to 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:

Strip x- and data- from the front of the element/attributes.

Convert the :, -, or _-delimited name to camelCase.

In your case, when Angular sees drawStock: "&" it understands it as drawStock: "&drawStock", which misleads it into looking for draw-stock in your HTML.
And because there is no draw-stock (but only drawStock) in your HTML, it does not work !

If you want to use the camelCase form in your HTML (e.g. because you find it more readable) and since HTML is case-insensitive, you should either (1) explicitely specify the attribute's name or (2) use lowercase in your directive. E.g.:

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

Directive (1): scope: { drawStock: '&drawstock' } // (1st camelCase, 2nd lowercase) Directive (2): scope: { drawstock: '&' } // (this is lowercase)
_{(both directives above refer to the "camelCased" HTML attribute)}

Collectives™ on Stack Overflow

Angularjs - attribute equal to value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related