angularJs 问题

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>