Angular "=" area does not work with camelCase

Question

I am the scope property of the directive

It works fine when I use show as the name attr.

 <span ng-repeat="field in fields"> <field-pill field="field" show="true"></field-pill> </span> 

app.js

 angular.module('app',[]); angular.module('app') .controller('AppCtrl', function($scope){ $scope.fields = [1,2,3,4]; }); angular.module('app') .directive('fieldPill', function () { return { template: '<div class="pill">{{field}}:{{show}}--<span ng-show="show">x</span></div>', restrict: 'E', scope:{ field: "=", "show": "=" } }; }); 

(see this plunkr http://plnkr.co/edit/AcqmxeCerCOtGaw9dq9t?p=preview )

But the directive does not load logical data at all when I use x-show as the attribute name.

 <span ng-repeat="field in fields"> <field-pill field="field" x-show="true"></field-pill> </span> 

app.js

 angular.module('app',[]); angular.module('app') .controller('AppCtrl', function($scope){ $scope.fields = [1,2,3,4]; }); angular.module('app') .directive('fieldPill', function () { return { template: '<div class="pill">{{field}}:{{xShow}}--<span ng-show="xShow">x</span></div>', restrict: 'E', scope:{ field: "=", xShow: "=" } }; }); 

Can someone explain why?

(see this plunkr for code with x-show http://plnkr.co/edit/2txoY3VaShH6WggnugcE?p=preview )

Answer 1

I think this is due to the x- prefix. If you change it to something like mShow , m-show , it will work.

From HTML5 spec :

Attribute names starting with two "x-" characters are reserved for user agent use and are guaranteed never to be formally added to the HTML language. For flexibility, attribute names containing underscores (the U + 005F LOW LINE character) are also reserved for experimental purposes and are guaranteed never to be formally added to the HTML language.

So avoid using x- for the normal attribute name. :)