Directive scope attributes break depending on attribute name

Question

I have a very strange phenomenon with a directive and an isolated scope, where the attributes in the scope work or do not work depending on the naming of the attribute. If I use

{check:'@check'}

it works just fine and as expected. However,if I use:

{checkN:'@checkN'}

the defined function never gets assigned. An example would look like:

HTML:

<item ng-repeat="list_item in model.list" model="list_item" checkN="checkName()" check="checkName()" position="$index"></item>'

Javascript

app.directive('item', function(){
   return {
      restrict: 'E',
      replace : false,   
      scope:{
              $index: '=position',
              check: '&check',
              checkN: '&checkN',
              model:'='
      },          
      template: '',
      link: function(scope, element, attrs){
        console.log(scope.check())
        console.log(scope.checkN())          
      }
    }
});

The console will then give me the following:

The checkName function has been called [which is the return string of the function]
undefined

It is really possible that it depends on the usage of capital letters? This would be very "unexpected" behaviour.

Thanks for your help

schacki

Answer 1

Html is case insensitive, therefore myAttribute and myattribute would be indistinguishable from each other depending on the browser. Angularjs' authors made a design decision about passing from html to javascript and vice-versa in terms of directives.

ngRepeat directive would be used as ng-repeat in the view(html). Likewise, your directive checkN should be used as check-n for angular to recognise that as directive.