javascript - Angular ng-show 不适用于 Controller

Question

我想在视频结束后显示一个 div。视频结束后会出现警报，但 div 仍然不可见。我做错了什么。提前感谢您的帮助。

@section scripts
{
    <script type="text/javascript" src="~/App/Controllers/TestController.js"></script>
}
<div ng-controller="TestController as ctrl" class="md-content" ng-cloak>
    <h1>Test</h1>

    <video id="myVideo"  controls autoplay>
        <source src="~/Videos/Test1.mp4">
    </video>

    <div id="test" ng-show="ui.showTest">
        <h1>Test</h1>
        Added this as a test to see if your controller is linked to the view
        <p>{{ui.shouldSeeThis}}</p>
    </div>
</div>

这是 Controller

angular.module('MyApp', ['ngMaterial', 'ngMessages'])
.controller('TestController', function ($scope, $http, $filter, $mdDialog) {


var vid;

function initializePlayer() {

    vid = document.getElementById("myVideo");
    vid.addEventListener('ended', videoFinish, false);
}

window.onload = initializePlayer;

$scope.ui = {
    showTest: false,
    //I've added this to see if your controller is linked to the view
    shouldSeeThis: "Hello World"
};
function videoFinish() {
    $scope.ui.showTest = true;
    alert("VideoFinish");
}

});

Answer 1

看起来您需要强制摘要以反射(reflect) View 中的范围更改。发生这种情况是因为您正在使用 javascript 事件更改范围值。

在你的 Controller 中添加$timeout:

.controller('TestController', function ($scope, $http, $filter, $mdDialog, $timeout)

在你的函数中用它包装代码:

function videoFinish() {
    $timeout(function() {
      $scope.ui.showTest = true;
      alert("VideoFinish");
    });
}