Question

我正在创建一个AngularJS的指令。在Internet Explorer（IE9）中，它无法按预期工作。它确实用模板替换原始html，但不更新模板的插值字符串。

它可以在Chrome，Firefox和Safari中正常使用

这是代码

angular.module('app', []);
angular.module('app').directive('mydirective', function () {
    return {
        replace: true,
        scope: {
            height: '@',
            width: '@'
        },
        template: '<div style="width:{{width}}px;height:{{height}}px;' +
            'border: 1px solid;background:red"></div>'
    };
});

这是调用指令的html

<div id="ng-app" ng-app="app">
    <div mydirective width="100" height="100"></div>
</div>

这是小提琴 http://jsfiddle.net/saP7T/

Answer 1

您可能需要使用ng-style。这意味着必须在其中设置包含样式的javascript对象。有关详细信息，请参阅该页面上的评论。所以，像这样：

angular.module('app').directive('mydirective', function () {
    return {
        replace: true,
        scope: {
            height: '@',
            width: '@'
        },
        template: '<div ng-style="getMyStyle()"></div>',
        link: function(scope, element, attrs) {
            scope.getMyStyle = function () {
                return {
                    width: scope.width + 'px',
                    height: scope.height + 'px',
                    border: '1px solid',
                    background: 'red'
                };
            }
        }
    };
});

Updated fiddle

AngularJs指令模板在IE9中没有更新

1 个答案: