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

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