All,
My understand of angularjs when it comes to directives is that when you have an isolate scope setup like so:
scope: {
dataSource: '='
}
that inside the link function: function(scope, ele, attr)
the scope would have a dataSource property which is bound to name on my controller if used like this:
<my-element data-source='name'></my-element>
However this isn't the case, here is an example:
http://jsfiddle.net/HB7LU/21879/
Thanks
Steve
Change the name of scope property dataSource to source. Because data is reserved name.
var myApp = angular.module('myApp', []);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
myApp.controller('MyCtrl', function($scope) {
$scope.name = 'Batman';
})
.directive('myElement', function() {
return {
template: '<div>Hello {{source}}</div>',
replace: true,
restrict: 'E',
scope: {
source: '='
},
link: function(scope, ele, attr) {
console.log(scope.source);
}
}
})
rescrict: 'E' , change to restrict :P