Currently, I am working on a directive that has four parameters being passed to it, all of which are bound to the directive scope.
The problem I am facing is that despite the data existing and being loaded, the directive is receiving all values as undefined. I considered that the issue might be due to the asynchronous loading of data, but since "page" isn't asynchronous and is available in the scope from the beginning, this doesn't seem to be the cause.
You can access the Plunker demo here: http://plnkr.co/edit/4NEciJZBFZOdJZqR1V6D
Here is the HTML code snippet:
<div ng-controller="myController">
<itemscounter offset="dataObject.offset" limit="dataObject.limit" total="dataObject.total" page="dataObject.page"></itemscounter>
</div>
And here is the JS code snippet:
var myApp = angular.module("myApp", []);
myApp.controller("myController", function($scope) {
$scope.dataObject = {
offset: 1,
limit: 20,
total: 25,
page: 2
}
});
myApp.directive("itemscounter", function() {
return {
restrict: "E",
scope: {
page: '=',
total: '=',
offset: '=',
limit: '='
},
template: "<div>Showing products {{offset}} to {{limit}} from {{total}} (Page {{page}})</div>",
link: function(scope, element, attrs) {
}
}
});
I would greatly appreciate any assistance provided. Thank you in advance!
Kind regards,
Guillermo