Question

指令

angular.module('myapp')
    .directive('hcComponentBlocker', function () {
        return {
            templateUrl: 'views/hccomponentblocker.html',
            priority: 1005,
            restrict: 'E',
            replace: false,
            scope: {
                animation: '@'
            },
            controller: 'ComponentBlockerCtrl',
            controllerAs: 'componentBlocker',
            bindToController: true
        };
    });

该模板：

<div class="component-blocker hc-ztop1002" ng-if="!componentBlocker.thisComponentIsLoaded">
    <!-- changed the following line from {{componentBlocker.animation}} -->
    <img src="{{componentBlocker.getLoadState()}}"/>
</div>

控制器：

angular.module('myapp')
    .controller('ComponentBlockerCtrl', function ($scope, HC_EVENTS) {
        var ctrl = this;
        ctrl.thisComponentIsLoaded = false;
        $scope.$on(HC_EVENTS.componentLoaded, function () {
            ctrl.thisComponentIsLoaded = true;
            console.log('component is loaded = ' + ctrl.thisComponentIsLoaded);
        });
        // begin added code
        ctrl.getLoadState = function() {
            return ctrl.thisComponentIsLoaded;
        };
        // end added code
    });

该指令由

调用

<hc-component-blocker animation="/images/spinner_black_16.gif"></hc-component-blocker>

问题：

HC_EVENTS.componentLoaded事件由包含<hc-component-blocker animation="/images/spinner_black_16.gif"></hc-component-blocker>的视图的控制器触发。它使用以下代码行执行此操作：$scope.$broadcast(HC_EVENTS.componentLoaded);

我知道这是有效的，因为控制台会告诉我'component is loaded = true'

但是，视图中没有任何内容更新。 ng-if="!componentBlocker.thisComponentIsLoaded"应删除整个元素，但它仍然存在。此外，{{componentBlocker.thisComponentIsLoaded}}继续显示“false”。

为什么指令的模板不会更新为componentBlocker.thisComponentIsLoaded的更新值？

ETA：它似乎与表达式一起正常工作。我希望理解为什么值不起作用但表达式起作用。这是设计的吗？

绑定值未在视图中更新

0 个答案: