I am currently facing a major issue within my Angular application.
There is a Factory in my code that makes an HTTP request to retrieve spoolers and returns a promise.
Spooler.prototype.load = function () {
var self = this;
var deferred = $q.defer();
$http.post('/spooler/' + this.id + '/load')
.success(function(data) {
self.statistics = data.statistics;
deferred.resolve(self);
})
.error(function(err, code) {
deferred.reject(err);
$log.error(err, code);
});
return deferred.promise;
};
The problem arises in my controller when utilizing the "then()" keyword. The values within this then() statement are passed to a directive as shown below:
$scope.load = function(){
spooler.load().then(
function(dataSpooler){
$scope.spooler = dataSpooler;
$scope.custom = 4;
},
function() {
$scope.dataFail = 'error error' ;
}
);
}
While logging the variable custom in the view shows '4', I encounter issues when using this variable in my directive:
<highchart-pie items="custom"></highchart-pie>
Below is the code for the directive:
.directive('highchartPie', function () {
return {
restrict: 'E',
replace: true,
scope: {
items : '='
},
template: '<div style="width:100%;margin: 0 auto;">not working</div>',
link: function (scope, element, attrs) {
console.log(scope); // i can see the item value 4
console.log(scope.items); !!! undefined !!!
// Link function is actually way bigger and renders the element to the template (useless to be shown)
}
}
In conclusion, assigning $scope.custom = 4; inside the then() function seems to cause delays in the directive receiving the values. However, if I declare $scope.custom = 4; at the beginning of the controller before the then() method, everything functions smoothly.
Any insights or suggestions would be greatly appreciated! Thank you in advance! :)