AngularJS controllerAs: обновление поля контроллера в $ интервале не обновляет ng-show

Question

Я использую синтаксис controllerAs, и по какой-то причине при обновлении поля контроллера через интервал $ он не отображает / не скрывает элементы в представлении должным образом. Я использую угловой интерфейс 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", но элементы НЕ отображаются / скрываются в зависимости от этого значения. Я проверил DOM в Chrome, и я вижу это (звездочки добавлены для акцентирования):

<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" присваивается ненулевое значение (я знаю это, потому что я установил точку останова в коде 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 НЕ отображается (и к нему все еще применяется класс css "ng-hide").

Что мне здесь не хватает?

Answer 1

Как отметил Ранджит С. в комментарии, проблема была в привязке "ng-show"! Там не должно быть {{ ... }} там. Снятие скобок решило проблему.