angularjs directive 'dataSource' And =

Question

This is really weird.

Does not work

scope: { 'dataSource': '='}

Works

scope: { 'mySource': '='}

Works

scope: { 'data': '='}

Can anyone tell me why in the 1st fiddle console.log prints undefined, and in the second 99.

http://jsfiddle.net/xz261bam/

http://jsfiddle.net/mg9axkro/

Answer 1

I think you will smack yourself on the head for this one... :)

The "data-" html5 prefix is stripped off, what you really get in your linking "source" not "dataSource":

angular.module('myApp', []).directive('myElement', function() {
    return {
        restrict: 'E',
        scope: {            
            'source': '=',            
        },
        template: '<p>test</p>',
        link: function(scope, iElement, iAttrs) {
            console.log(scope.source);
        }
    }
});

Answer 2

There is obviously a conflict with HTML data attribute if your name uses the data-whatever prefix. xdata-whatever or x-data-whatever is working just fine

<my-element xdata-source="counter"></my-element

or

<my-element x-data-source="counter"></my-element

example

Answer 3

Like everyone said, the data- prefix is stripped off, and change the scope's property name will solve the problem.

An alternative way is to double the data- prefix like this:

<my-element data-data-source="counter"></my-element>

JSFiddle: http://jsfiddle.net/4j3sks6u/