從動態html綁定ng樣式

Question

我將某些動態數據存儲在數據庫中時遇到問題。 我以ng樣式存儲在數據庫div中，然后當響應從服務器返回與此div時，希望將樣式應用於此div。

如果它不是動態的，那么我沒有問題。 這是我的代碼：

這是我的靜態html。

<div ng-controller="empty" >
    <div>
        <div ng-bind-html="validData | unsafe"/>
    </div>
</div>

這來自數據庫。

<div class="row">   
    <div ng-style="visualization" class="col-md-4">.col-md-2</div>   
    <div ng-style="visualization" class="col-md-8">.col-md-8</div> 
</div> 
<div class="row">
    <div ng-style="visualization" class="col-md-4">.col-md-8</div>
</div>

這應該是我的控制器

$http.get(globalVars + 'page/' + lastParam)
  .success(function (data) {
    $scope.empty = data;

    $scope.validData = $scope.empty.layout.schema;

    $compile($scope.validData);

    if(typeof $rootScope.mode == 'undefined' || $rootScope.mode    =='edit'){

       $scope.visualization = {
         "border-style": "dashed"
       }
    }
    else{
       $scope.visualization = {
         "border-style": "none"
    }
  }
  })
  .error(function (data) {
});

從理論上講，在來自數據庫的數據的每個div中，應添加"style=border-style:none/dashed" ，但這不會發生，因此ng-style不會綁定到angular。

一些幫助，不勝感激。 謝謝

Answer 1

$ compile（html）函數返回另一個函數，您可以將$ scope變量傳遞給該函數。 您可以嘗試做：

$scope.validData = $compile($scope.validData)($scope);

這可能會使您的控制器代碼如下所示：

$http.get(globalVars + 'page/' + lastParam).success(function (data) {
  $scope.empty = data;

  $scope.validData = $scope.empty.layout.schema;
  if(typeof $rootScope.mode == 'undefined' || $rootScope.mode    =='edit'){

    $scope.visualization = {
      "border-style": "dashed"
    }
  }else{
    $scope.visualization = {
      "border-style": "none"
    }
  }

  $scope.validData = $compile($scope.validData)($scope);

}).error(function (data) {

});

但是，還有其他方法可以實現您想要實現的目標，可能使用CSS。 例如，在外部div上使用ng-class放置條件類：

<div ng-class="{'edit-mode': editModeEnabled }" ng-bind-html="validData | unsafe"/>

然后在CSS中：

.edit-mode .row > div { 
  border-style: dashed;
}

並在控制器中設置editModeEnabled：

$scope.editModeEnabled = $rootScope.mode === 'edit';

Answer 2

謝謝，我用了你的建議。

div ng-class="{'edit-mode': editModeEnabled }" ng-bind- html="validData | unsafe"/>

然后在CSS中：

.edit-mode .row > div { 
  border-style: dashed;
}

問候