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>

这是小提琴 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'
                };
            }
        }
    };
});

更新的小提琴