Here is my context: I have a parent controller which load json data via a service.
Via a ng-repeat i pass the data to a directive via @ attribute so every directive will have its own copy of the data so it can modify it without affecting the initial loaded data in the parent scope.
the data is array of object.
Here is the controller (the parent) where the data is loaded :
$scope.allOptions = [];
optionService.load(function(data) {
angular.forEach(data, function(d) {
this.push(d);
}, $scope.allOptions);
});
optionService.getAll().then(function(data){
angular.forEach(data[0].data, function(d) {
this.push(d);
}, $scope.allOptions);
angular.forEach(data[1].data, function(d) {
this.push(d);
}, $scope.allOptions);
angular.forEach(data[2].data, function(d) {
this.push(d);
}, $scope.allOptions);
});
The associated view where i call my directive is :
<compare-car options="{{allOptions}}"></compare-car>
The directive :
angular.module('ad.module') .directive('compareCar', function() {
return {
restrict: 'E',
scope: {
options: '@'
},
templateUrl: 'compare.html',
controllerAs: 'vm',
bindToController: true,
controller: function($scope) {
var vm = this;
// some methods
},
link: {
post: function($scope, el, attr, vm) {
var options = angular.fromJson(vm.options);
options.forEach(function(opt) {
// some modification to options
});
vm.allinall = options;
}
}
};
});
In the template of associated with the directive i call
<div ng-repeat="option in vm.allOptions">
So, my problem is that the data passed to options attribute is empty, to resolve that i added ng-model-options="{ debounce: 3000 }" to the call of the directive so the options will be available when calling the directive. This works the first time and when debugging due to the delay of breakpoints.
I have tried to use '=' (just for testing and even if it's not my need) for options attribute, but i had the same problem it works the first time only.
Every help is appreciated.
Thanks in advance