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>