internet-explorer - 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>

这是 fiddle 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