コントローラからの角度表示がありません

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> 

これは）コントローラ

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

スコープの変更をビューに反映させるためにダイジェストを強制する必要があるようです。これは、javascriptイベントを使用してスコープ値を変更しているために発生します。お使いのコントローラで

$timeoutを追加します。

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

あなたの関数では、それを使用してコードをラップ：

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

Answer 2

コメントに記載されているように、オブジェクトプロパティにバインドすることをお勧めします。次のことを試してください：

コメント状態として

<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> 

---

$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"); 
} 

、私はあなたがあなたの上にコードを貼り付ける場合<p>要素内の「Hello World」を参照してくださいする必要があり、オブジェクトに余分なプロパティを追加しました。私はあなたの質問が関連するコードのすべてを提供していないので、これを答えに入れました。