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未触发值= true

1 个答案: