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