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/
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);
}
}
});
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
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With