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.
-
1its because of the keyword 'data'. 'xdataSource' would work just fine.Yasser Shaikh– Yasser Shaikh2014-08-08 12:36:53 +00:00Commented Aug 8, 2014 at 12:36
Add a comment
|
3 Answers
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);
}
}
});
1 Comment
alou
+1 for the "stripped off" and the actual linking evaluation :)
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
Comments
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/
