函数返回的Stange值(使用popcorn.js、角和翡翠)

Question

谢谢你的阅读。

我有个“奇怪”的问题。我正在运行running (在节点服务器上)，并实现了popcorn.js (一个html5媒体框架，popcornjs.com )。

爆米花上有一个名为currentTime()的事件属性，所以当您调用Popcorn.currentTime()时，它会给出它正在播放的视频的当前时间。此功能在console.log(Popcorn.currentTime())中工作；但由于某种原因，当我试图从函数中获取相同的值时，会得到'9‘值。

我会列出我的角度控制器和我的玉石代码。我的问题在//显示当前时间部分：

这是我的角度控制器：

  angular.module('app').controller('mvEditCtrl', function ($scope,     mvNotifier,mvIdentity,$location){ 

 $scope.identity = mvIdentity;   
 $scope.videoID = $location.search().id;

})
  //This custom directive holds the loading of the Popcorn video to avoid race condition. 
  .directive('popcornVideo', ['$timeout', function (timer) {
    return {
        scope: false,
        link: function ($scope) {
          timer(function () {
            var video = Popcorn.smart(
             '#video',
             $scope.videoID);

            //>>****Show current time. 
            $scope.theTime = setInterval(function() { 
              video.currentTime();
              console.log(video.currentTime());
              var time = video.currentTime();
              return time;
            },1000);

          }, 0);
        }
    }
}]);

这是我的Jade代码(见我在哪里调用{{theTime}} )。值得注意的是，我也尝试在这里使用ng绑定，并在Dom (9)中使用相同的结果。

.panel.panel-primary
.panel-heading.text-center Video Preview
.panel-body
        .popcornVideo(popcorn-video)
            #video(controls)
            #footnotediv
.panel.panel-primary
    .panel-heading.text.center Video Controls
    .panel-body.text-center Video Timer :  {{theTime}}   

因此，{{theTime}在页面上呈现为"9"，而console.log则显示当前的视频时间( 2:34)等等。

非常感谢！

Answer 1

setInterval()返回计时器的id，以便您稍后可以清除它。尝试这样做(使用$interval服务，这样角形知道何时theTime更新.

.directive('popcornVideo', ['$interval', function ($interval) {
    return {
        scope: false,
        link: function ($scope) {
            var video = Popcorn.smart(
                '#video',
                $scope.videoID);

            //>>****Show current time. 
            $interval(function() { 
                $scope.theTime = video.currentTime();
            },1000);
        }
    }
}]);