When I include
scope: {finishcallback: "&"}in my directive, the binding of values with$scope.minutes = 1tong-bind="minutes"stops working.
I am currently working on creating a countdown timer using Angular directives. However, I am facing issues in setting the value of remaining minutes and seconds to the child span element when I introduce a scope function in the directive.
<time id="countdown_{{order.Id}}" ng-if="order.StatusCode == 1" countdown="{{order.RemainingTimeToPrepareOrder}}" finishcallback="vm.countdownfinished(parameter)" callbackparameter="{{order.Id}}" countdownfinished="toggle()">
<b> <span class="value" ng-bind="minutes"></span> minutes <span class="value" ng-bind="seconds">--</span> seconds</b>
</time>
Below is the code for my directive.
function countdown() {
return {
restrict: 'A',
scope: {
finishcallback: "&"
},
controller: function ($scope, $attrs, $timeout) {
$attrs.$observe('countdown', function (value) {
var ds = new Date();
ds.setTime(value * 1000);
$scope.days = '-';
$scope.hours = $scope.minutes = $scope.seconds = '--';
$scope.timeout = $timeout(update, 1000);
function update() {
now = +new Date();
$scope.delta = Math.round((ds - now) / 1000);
if ($scope.delta >= 0) {
$timeout(update, 1000);
} else if ($attrs.countdownfinished) {
$scope.$apply($attrs.countdownfinished);
}
}
});
},
link: function ($scope, $element, $attrs) {
$scope.$watch('delta', function (delta) {
if (typeof delta === 'undefined') return;
if (delta < 0) {
delta = 0;
}
$scope.days = Math.floor(delta / 86400);
$scope.hours = forceTwoDigits(Math.floor(delta / 3600) % 24);
$scope.minutes = forceTwoDigits(Math.floor(delta / 60) % 60);
$scope.seconds = forceTwoDigits(delta % 60);
});
$scope.toggle = function () {
$scope.finishcallback({ parameter: $attrs.callbackparameter });
}
function forceTwoDigits(num) {
return String(num < 10 ? '0' + num : num);
}
}
}
}
Everything was functioning properly until I introduced the finishcallback: "&" scope variable in my directive to allow custom function calls upon countdown completion. After adding this, the assignments like $scope.minutes no longer update the values in my spans.
Is there a way to dynamically change the span values even after defining a scope in my directive?