Question

该应用程序有一个控制器，它使用服务来创建视频播放器的实例。视频播放器触发事件以每隔几秒显示进度。当视频到达某一点时，我想在视频播放器顶部显示一个小部件。

视图的小部件包含在ng-show指令中。

在触发事件并填充值后，dom元素需要60秒以上才能接收信号以删除ng-hide类。

如果我尝试使用plain dom menthod（如document.getElementById（eleId）.innerHTML = newHTML）来实现它，则更新是即时的。

我做错了什么？这是代码中的完整序列：

控制器：

MyApp.controller('SectionController', ['$scope', 'PlayerService'], function($scope, PlayerService){
$scope.createPlayer = function() {
    PlayerService.createPlayer($scope, wrapperId);
}});

服务：

MyApp.service('PlayerService', [], function(){

this.createPlayer=function(controllerScope, playerWrapper){

    PLAYER_SCRIPT.create(playerWrapper) {

        wrapper : playerWrapper,
        otherParam : value,
        onCreate : function(player) {

            player.subscribe(PLAY_TIME_CHANGE, function(duration){
                showWidget(controllerScope, duration);
            })

        }
    }

}

function showWidget(controllerScope, duration) {
    if(duration>CERTAIN_TIME) {
        $rootScope.widgetData = {some:data}
        $rootScope.showWidget = true;
    }

}});

查看：

<div ng-show="showWidget">  <div class="wdgt">{{widgetData.stuff}}</div>  </div>

Answer 1

解决了！ $ scope。$ apply（）完成了这个伎俩。

我的猜测是，由于应用程序内部的其他复杂逻辑广告绑定，以默认方式计算角度变化的延迟。

@floribon感谢关于＆＃34;复杂角度内容的微妙提示＆＃34;。

服务功能内的代码改为：

function showWidget(controllerScope, duration) {
if(duration>CERTAIN_TIME) {
    $rootScope.widgetData = {some:data}
    $rootScope.showWidget = true;
    $rootScope.$apply();
}}

Answer 2

隐藏视图中是否有复杂的角度内容？

您应该尝试使用ng-if而不是ng-show，区别在于当条件为false时，ng-if将从DOM中删除元素而不是仅隐藏它（其中也是你在vanilla JS中做的事情。

然而，当使用ng-show隐藏视图时，其中的所有观察者和绑定都由Angular继续计算。如果ng-if解决您的问题，请告诉我们，否则我会编辑我的答案。

ng-show指令在触发后更新dom所需的时间太长

2 个答案: