AngularJS controllerAs:更新$interval中的controller字段不会更新ng show

AngularJS controllerAs: updating controller field in $interval does not update ng-show

本文关键字:更新 字段 controller ng show 中的 controllerAs interval AngularJS      更新时间:2023-09-26

我使用的是controllerAs语法,由于某种原因,在$interval中更新控制器的字段时,它无法在视图中正确显示/隐藏元素。我使用angular的UI路由器。

我认为这个问题最好用代码来描述,所以请原谅代码转储。

我的状态("refreshLogs"只是一个调用logService获取更新日志的函数):

angular.module('portal')
.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
         .state('logs', {
             'abstract': true,
             views: {
                 "@": { template: '<div ui-view></div>' }
             }
         })
        .state('logs.view', {
            url: '/logs/:id',
            resolve: {
                log: function ($stateParams, logService) {
                    return logService.getLog($stateParams.id);
                },
                refreshLog: function ($stateParams, logService) {
                    var id = $stateParams.id
                    var fn = function (id) {
                        return logService.getLog(id)
                    };
                    return function() { return fn(id) }
                }
            },
            templateUrl: '/app/logs/viewlog.html',
            controller: 'logController',
            controllerAs: 'vm'
        })
});

我的控制器:

angular.module('portal.controllers')
.controller('logController', function ($state, log, refreshLog, $scope, $interval) {
    var vm = this;
    vm.log = log;
    vm.refreshTimer = $interval(function () {
        refreshLog().then(function (data) {
            vm.log = data;
        })
    }, 15000);
    $scope.$on("$destroy", function () {
        if (angular.isDefined(vm.refreshTimer)) {
            $interval.cancel(vm.refreshTimer);
        }
    });
});

最后是观点:

<div ng-show="{{ vm.log != null }}">
    <div class="page-header">
        <h1>{{ vm.log.JobType }} ({{ vm.log.JobResult }})</h1>
    </div>
    Parameters: {{ vm.log.JobParameters }}
<pre>{{ vm.log.Content }}</pre>
</div>
<div ng-show="{{ vm.log == null }}">
    <div class="page-header">
        <h1>Waiting for log...</h1>
    </div>
</div>

它在DOM更新中显示"ng-show"值,但元素不会基于该值显示/隐藏。我在Chrome中检查了DOM,看到了以下内容(添加星号以强调):

<div ui-view="" class="ng-scope"><div ng-show="**false**" class="ng-binding ng-scope ng-hide">
    <div class="page-header">
        <h1 class="ng-binding"> ()</h1>
    </div>
    Parameters: 
<pre class="ng-binding"></pre>
</div>
<div ng-show="**true**" class="ng-scope">
    <div class="page-header">
        <h1>Waiting for log...</h1>
    </div>
</div></div>

从哪个开始是正确的,并且显示了正确的div。几秒钟后,日志被刷新,"vm.log"变量被设置为非null值(我知道这一点,因为我在分配该值的JS代码中设置了一个断点,它看起来是正确的)。之后,我再次检查DOM,并看到以下内容:

<div ui-view="" class="ng-scope"><div ng-show="**true**" class="ng-binding ng-scope ng-hide">
    <div class="page-header">
        <h1 class="ng-binding">...</h1>
    </div>
...
</pre>
</div>
<div ng-show="**false**" class="ng-scope">
    <div class="page-header">
        <h1>Waiting for log...</h1>
    </div>
</div></div>

请注意,"ng-show"属性显示了正确的值。因此,该表达式显然已被重新评估。然而,旧的"Waiting for log…"标题仍然显示,并且第一个div没有显示(并且它仍然应用了"ng-hide"css类)。

我在这里错过了什么?

正如Ranjith S在评论中指出的,问题出在ng-show绑定中!那里不应该有{{ ... }}。移除支架解决了这个问题。