I'm new to Angular and after a few weeks of struggling through it now I ran into a problem i cannot solve. So now I'm asking this question here hopeing somebody can help me or give me a hint :)
My Problem is located on a custom directive. The directive expects 6 Attributes. 5 of them a simple Strings or Numbers. One is an Array, containing JSON-Objects which is loaded before from a REST-Service in the Controller. So now the Problem is, that the directive only gets 3 of them with its value and the others as null. I've tried observing the Attributes with $observe but that didn't work. So now I am at my wit's end and hope somebody has THE ANSWER :D Many thanks in advance!
DIRECTIVE (simplyfied)
myAppDirectives.directive('myDirective',['aService', function(aService) {
return {
restrict : 'E',
scope : {
a: '@',
b: '@',
c: '@',
d: '@',
e: '@',
f: '@'
},
link : function postLink(scope, element, attrs) {
console.log(attrs.a);
console.log(attrs.b);
console.log(attrs.c);
console.log(attrs.d);
console.log(attrs.e);
console.log(attrs.f);
attrs.$observe('a', function(value) {
console.log('a has changed value to ' + value);
});
attrs.$observe('b', function(value) {
console.log('b has changed value to ' + value);
});
attrs.$observe('c', function(value) {
console.log('c has changed value to ' + value);
});
attrs.$observe('d', function(value) {
console.log('d has changed value to ' + value);
});
attrs.$observe('e', function(value) {
console.log('e has changed value to ' + value);
});
attrs.$observe('f', function(value) {
console.log('f has changed value to ' + value);
});
}
}]);
HTML-SNIPPET
<my-Directive a="{{a}}"
b="{{b}}"
c="{{c}}"
d="{{d}}"
e="{{e}}"
f="{{f}}">
</my-Directive>
CONTROLLER-SNIPPET (simplyfied the $http-Call)
$scope.a= 200;
$scope.b= 250;
$scope.c= -1;
$scope.d= 'Doret';
$scope.e= 100;
$scope.f= [{"a":"Lorem","b":1},{"a":"Ipsum","b":2}];