1. IE不能渲染指令中的 style="background-color",而chrome和firefox可以
<!DOCTYPE html> <html ng-app="Dialog"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>directive-dialog</title> <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"> <script src="scripts/angular.js"></script> </head> <body> <div ng-controller="MyCtrl">
<div>
<input type="text" ng-model="color" placeholder="Enter a color"/>
<hello-world color="{{color}}"/>
</div>
</div> <script type="text/javascript"> var myModule = angular.module("Dialog", []); myModule.controller("MyCtrl", function ($scope) { $scope.color="blue"; });
myModule.directive('helloWorld', function factory() {
return {
scope: true,
restrict: 'E',
transclude:true,
replace:true,
template: '<p style="background-color:{{color}}">Hello World</p>' //
//
//解决办法:使用 ng-attr-style 来替换 style,这样IE就可以正常显示背景颜色
};
}); </script> </body> </html>