javascript - ng-show 未在 value=true 时触发

Question

当 Vimeo 视频到达末尾时，我尝试使用 ng-show 显示一个 div，但我可以让它工作。

负责ng-show的 Controller 的相关部分看起来像

    'use strict';

    myApp.controller('videoController', [
        '$scope',
        '$routeParams',
        '$rootScope',
        '$location',
        '$log',
        function(
            $scope, 
            $routeParams, 
            $rootScope, 
            $location,
            $log
        )
        {

            var player = new Vimeo.Player('player');
            player.on('timeupdate', function(data) {

            $scope.videoFinished = false;

            $scope.currentPlayDuration = (data.percent * 100).toFixed(1);

            if($scope.currentPlayDuration==100.0){
                $scope.videoFinished = true;
                $log.debug('Video finished: ' + $scope.videoFinished);
                $scope.apply();
            }

        });
    }
]);

以及该部分的 View :

<div class="row" ng-show="videoFinished">Thank you for watching!</div>

定义相关 Controller 的部分:

myApp.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider) {
    $routeProvider
    .when('/video', {
        templateUrl: 'video.html',
        controller: 'videoController'
    })  
    .otherwise({
        redirectTo: '/'
    });

当我将视频运行到终端控制台时将显示

视频完成:true

但是上面的 div 没有显示。

有什么线索吗？

Answer 1

视频播放器的事件发生在 AngularJS 的摘要周期之外，因此您必须使用 $scope.$apply() 手动启动摘要周期，以便它可以获取更改:

player.on('timeupdate', function(data) {

    $scope.videoFinished = false;

    $scope.currentPlayDuration = (data.percent * 100).toFixed(1);

    if ($scope.currentPlayDuration == 100.0) {
        $scope.videoFinished = true;
        $log.debug('Video finished: ' + $scope.videoFinished);
        $scope.$apply();
    }
});

顺便说一句，让 Controller 直接与页面中的非 Angular 组件交互并不被认为是好的做法。执行此操作的适当位置通常是在自定义指令中。