I'm creating an AngularJS's directive. In Internet Explorer (IE9) it doesn't work as expected. It does replace the original html with the template, but doesn't update the template's interpolated strings.
It works correctly in Chrome, Firefox and Safari
Here's the code
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>'
};
});
and here is the html calling the directive
<div id="ng-app" ng-app="app">
<div mydirective width="100" height="100"></div>
</div>
here's the Fiddle http://jsfiddle.net/saP7T/
You're probably going to need to use ng-style. This means having to setup a javascript object with your styles in it. See the comments on that page for more info. So, something like this:
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'
};
}
}
};
});