0

指令

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

我知道这是有效的，因为控制台会告诉我“组件已加载 = true”

但是，视图中的任何内容都不会更新。ng-if="!componentBlocker.thisComponentIsLoaded"应该删除整个元素，但它仍然存在。另外，{{componentBlocker.thisComponentIsLoaded}}继续显示“假”。

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

ETA：它似乎与表达式一起正常工作。我想了解为什么一个值不起作用但一个表达式起作用。这是设计使然吗？

4

0 回答 0