ng-show 未在 value=true 上触发

Question

我正在尝试使用 ng-show 在 Vimeo 视频结束时显示 div，但我可以让它工作。

负责控制器的相关部分ng-show看起来像

    '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();
            }

        });
    }
]);

以及该部分的视图：

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

相关控制器定义部分：

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

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

Video finished: 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();
    }
});

附带说明一下，让您的控制器直接与页面中的非 Angular 组件交互并不是好的做法。这样做的适当位置通常是在自定义指令中。

ng-show 未在 value=true 上触发

ng-show not triggered on value=true

javascript

angularjs

ng-show

angularjs-ng-show