ng-style 嵌套在 ng-html-bind 中

Question

这对我不起作用，样式从未应用过，但不确定是否由于嵌套而支持此功能？

datas = [
  { 
   name:"item1", 
   svg:"<svg width="100" height="100"><circle ng-style="{fill:data.color}" cx="50" cy="50" r="40" stroke="green" stroke-width="4"/</svg>"
  },
  { 
   name:"item2", 
   svg:"<svg width="200" height="60"><circle ng-style="{fill:data.color}" cx="50" cy="50" r="40" stroke="blue" stroke-width="4"/</svg>"
  }

]

   $scope.toTrusted = function(html_code) {
            return $sce.trustAsHtml(html_code);
        }

<div ng-repeat="data in datas">
 <h1>{{data.name}}</h1>    
 <input type="text" ng-model="data.color">
 <div ng-bind-html="toTrusted(data.svg)"</div>
</div>

Answer 1

这个怎么样？

datas = [
  { 
   name:"item1", 
   color:"#ff0000",
   width: 100,
   height: 100,
   strokeColor: "green"
  },
  { 
   name:"item2", 
   color:"#00ff00"
   width: 200,
   height: 60,
   strokeColor: "blue"
  }
]
<div ng-repeat="data in datas">
    <h1>{{data.name}}</h1>    
    <input type="text" ng-model="data.color">
    <svg width="{{data.width}}" height="{{data.height}}"><circle ng-style="{fill:data.color}" cx="50" cy="50" r="40" stroke="{{data.strokeColor}}" stroke-width="4"></svg>
</div>

如您所见，我向数据模型添加了更多属性。如果不想更改数据，可以稍后在控制器中将属性添加到具有属性条件的 forEach 循环中。