I am having trouble understanding how to properly set a {{ variable }} in my directive template. Currently, the only way I can update it is by using $scope.$apply(), specifically for updating the current-time text in a video player.
You can view my code example on JSFiddle here with the usage of $scope.$apply() http://jsfiddle.net/ntdyp4oe/
In my directive, I am trying to find a way to update {{ currentTime }} without relying on $scope.$apply()
angular.module('canvas-video',[]).directive('canvasVideo', function($compile)
{
return {
restrict: 'E',
replace:true,
template:['',
'<div id="canvas-video">',
'<canvas id="canvas" ng-click="togglePlayback()" width="{{ width }}" height="{{ height }}"></canvas>',
'<video src="{{ src }}" id="player"></video>',
'<div id="controls">',
'<div class="transport"><input id="slider" type="range" min="0" max="100" value="0" step="1"></div>',
'<span class="current-time">{{ currentTime }}</span> | <span class="total-time">{{ totalTime }}</span>',
'</div>',
'</div>'
].join(''),
scope: {
src: '=',
width: '=',
height: '=',
autoplay: '=?'
},
compile: function(element, attributes)
{
return {
pre: function(scope, element, attributes)
{
if (!attributes.autoplay) attributes.autoplay = true;
scope.currentTime = '00:00:00';
scope.totalTime = '00:00:00';
},
post: function(scope, element, attributes)
{
}
}
},
controller: function($scope, $element, $attrs)
{
var canvas = angular.element('canvas')[0];
var ctx = canvas.getContext('2d');
var player = angular.element('video')[0];
player.autoplay = ($attrs.autoplay == 'false') ? 0 : 1;
$scope.togglePlayback = function()
{
(player.paused) ? player.play() : player.pause();
};
$scope.renderPlayer = function()
{
var $this = this;
$attrs.width = player.videoWidth;
$attrs.height = player.videoHeight;
canvas.setAttribute('width', $attrs.width);
canvas.setAttribute('height', $attrs.height);
$scope.totalTime = $scope.timecode(player.duration);
(function loop()
{
if (!$this.paused && !$this.ended)
{
ctx.drawImage($this, 0,0, $attrs.width, $attrs.height);
window.requestAnimationFrame(loop);
}
})();
};
//-- This section is where a lot of $apply calls are made
//-- and doesn't work without it
$scope.renderTime = function()
{
$scope.$apply(function()
{
$scope.currentTime = $scope.timecode(player.currentTime);
});
};
$scope.timecode = function(seconds)
{
var minutes = Math.floor(seconds/60);
var remainingSec = seconds % 60;
var remainingMinutes = minutes % 60;
var hours = Math.floor(minutes/60);
var floatSeconds = Math.floor((remainingSec - Math.floor(remainingSec)) * 100);
remainingSec = Math.floor(remainingSec);
return $scope.getTwoDigits(hours) + ":" + $scope.getTwoDigits(remainingMinutes) + ":" + $scope.getTwoDigits(remainingSec);
};
$scope.getTwoDigits = function(number)
{
return (number < 10) ? "0" + number : number;
};
player.addEventListener('timeupdate', $scope.renderTime);
player.addEventListener('play', $scope.renderPlayer);
}
}
});