在我的指令模板更新{{变量}} [英] updating a {{ variable }} in my directive template
问题描述
我不认为我了解如何设置 {{}变量} 在我的指令正确的模板。我可以管理更新它的唯一方法是通过调用 $范围。$适用（）和所有我想要做的就是更新我的当前时间文本视频播放器
您可以在这里找到我的小提琴使用 $范围。$适用（）的 http://jsfiddle.net/ntdyp4oe/
这是目前我的指导，我想知道如果我可以更新 {{currentTime的}} $申请，而无需使用 $范围。（ ）
angular.module（'画布视频'，[]）。指令（canvasVideo'，函数（$编译）
{
返回{
限制：'E'，
更换：真实，
模板：[''，
'＆LT; DIV ID =帆布视频＆GT;，
'＆LT;帆布ID =画布NG点击=togglePlayback（）WIDTH ={{宽度}}HEIGHT ={{高度}}＆GT;＆LT; /帆布＆GT;，
＆lt;视频SRC ={{SRC}}ID =玩家＆GT;＆LT; /视频＆GT;，
'＆LT; DIV ID =控制＆GT;，
'＆LT; DIV CLASS =运输＆GT;＆LT;输入ID =滑盖式=范围最小=0最大值=100值=0步=1＆GT;＆LT; / DIV＆GT ;'，
'＆LT;跨度类=当前时间＆GT; {{currentTime的}}＆LT; / SPAN＆GT; | ＆LT;跨度类=总时间＆GT; {{TOTALTIME}}＆LT; / SPAN＆GT;，
'＆LT; / DIV＆GT;，
'＆LT; / DIV＆GT;'
]。加入（''），
范围： {
SRC：=，
宽度：'='，
高度：'='，
自动播放：=？
}，
编译：功能（元素，属性）
{
返回{
pre：功能（范围，元素，属性）
{
如果attributes.autoplay =真（attributes.autoplay！）;
scope.currentTime = '00：00：00';
scope.totalTime = '00：00：00';
}，
岗位：功能（范围，元素，属性）
{ }
}
}，
控制器：函数（$范围，$元，$ ATTRS）
{
VAR帆布= angular.element（'画布'）[0];
变种CTX = canvas.getContext（'2D'）;
VAR球员= angular.element（'视频'）[0];
player.autoplay =（$ attrs.autoplay =='假'）？ 0：1; $ scope.togglePlayback =功能（）
{
（player.paused）？ player.play（）：player.pause（）;
}; $ scope.renderPlayer =功能（）
{
变量$ =这本;
$ attrs.width = player.videoWidth;
$ attrs.height = player.videoHeight;
canvas.setAttribute（'宽'，$ attrs.width）;
canvas.setAttribute（'高度'，$ attrs.height）;
$ scope.totalTime = $ scope.time code（player.duration）; （函数循环（）
{
如果（$ this.paused和放大器;！＆安培;！$ this.ended）
{
ctx.drawImage（$此，0,0，$ attrs.width，$ attrs.height）;
window.requestAnimationFrame（环）;
}
}）（）;
}; // - 这里是函数调用$应用的一群，
// - 没有它不会更新
$ scope.renderTime =功能（）
{
$范围。$应用（功能（）
{
$ scope.currentTime = $ scope.time code（player.currentTime）;
}）;
}; $ scope.time code =功能（秒）
{
变种分钟= Math.floor（秒/ 60）;
VAR remainingSec =秒60％;
VAR remainingMinutes =分钟％60;
VAR小时= Math.floor（分钟/ 60）;
变种floatSeconds = Math.floor（（remainingSec - Math.floor（remainingSec））* 100）;
remainingSec = Math.floor（remainingSec）;
返回$ scope.getTwoDigits（小时）+：+ $ scope.getTwoDigits（remainingMinutes）+：+ $ scope.getTwoDigits（remainingSec）;
}; $ scope.getTwoDigits =功能（数字）
{
返回（数小于10）？ 0+号：号;
}; player.addEventListener（'timeupdate'，$ scope.renderTime）;
player.addEventListener（'玩'，$ scope.renderPlayer）;
}
}
}）;
您确实需要使用 $适用（）该改变的范围是角之外的事件核心为了让角知道跑视图摘要
有关，如 NG-点击通过内核配置管理活动， $ Apply（应用）内部调用。
您DOM的听众是不是这样的指令中。您还可以使用 $超时，以避免与碰撞消化正在进行中发生的错误。
$超时将推迟调用 $适用本身在内部如果消化正在进行中
I don't think I am understanding how to set a {{ variable }} in my directive template correctly. The only way I can manage to update it is by calling $scope.$apply() and all I am trying to do is update my current-time text for a video player.
You can find my fiddle here using $scope.$apply() http://jsfiddle.net/ntdyp4oe/
This is currently my directive and I am wondering if I can update {{ currentTime }} without having to use $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);
}
})();
};
//-- here is the function calling $apply a bunch and
//-- wont update 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);
}
}
});
You do need to use $apply() for events that change the scope that are outside of angular core in order to let angular know to run a view digest
For events managed by core directives such as ng-click , $apply() is called internally.
Your DOM listeners are not within such a directive. You can also use $timeout to avoid collisions with digest in progress errors occurring.
$timeout will defer calling $apply itself internally if digests are in progress
这篇关于在我的指令模板更新{{变量}}的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
