通过angularjs指令绑定文本

时间:2016-05-17 20:49:58

标签: angularjs

我需要在指令的视图中获取字符串值,虽然这应该是直截了当的,但它不起作用。

在调用该指令的视图中: <hc-component-blocker animation="/images/spinner_black_16.gif"></hc-component-blocker>

指令:

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

指令的模板:

<div class="component-blocker" ng-if="!ComponentBlocker.thisComponentIsLoaded">
    <img ng-src="{{ComponentBlocker.animation}}"/>
</div>

ComponentBlockerCtrl:

angular.module('xnuapp')
    .controller('ComponentBlockerCtrl', function ($scope, HC_EVENTS) {
        console.log(this.animation);
});

当我运行它时,我在控制台中得到了预期的字符串值(“/ images / spinner_black_16.gif”)。

但图像不显示。在HTML中呈现的内容是<div class="component-blocker ng-scope" ng-if="!ComponentBlocker.thisComponentIsLoaded" animation="/images/spinner_black_16.gif"><img></div>

我应该寻找什么?我认为这是将animation的字符串值输入控制器和视图的模型。为什么视图没有获得传递给它的属性的值?

1 个答案:

答案 0 :(得分:0)

通过将replace更改为false来解决此问题。我不完全确定为什么会这样,但确实如此。