如何将范围数据绑定到指令样式

Question

所有

现在，我想要做的是使用AngularJS双向数据绑定来改变指令样式，如背景颜色。

var app = angular.module("vp", []);

app.controller("main", function($scope) {
      $scope.style={
        "background-color": "red"
      };
    });

app.directive("bg", function($compile){

  return {
    restrict: "AE",
    controller: function($scope){
    },
    compile: function(tEL, attrs){
      return {
        post: function(scope, EL, attrs, controller){
          var d3EL = d3.select(EL[0]);
          d3EL.attr("ng-style", function(){
            return "style";
          });
        }
      }
    }
  }

});

该指令如下：

<bg style="display:block; width:100px; height:100px;">This is BG directive.</bg>

但是当我在这个指令中添加一个div时，请使用$ compile，ng-style working。

app.directive("bg", function($compile){

  return {
    restrict: "AE",
    controller: function($scope){
    },
    compile: function(tEL, attrs){
      return {
        post: function(scope, EL, attrs, controller){
          var d3EL = d3.select(EL[0]);
          d3EL.append("div")
              .style({
                width:"50px",
                height: "50px",
                border: "black 1px solid"
              })
              .attr("ng-style", function(){
                return "style";
              })
              .each(function(){
                $compile($(this))(scope);
              });
        }
      }
    }
  }

});

我想知道为什么ng-style不能与指令本身一起使用？

感谢。