ダイナミックHTMLからng-styleをバインドします

Question

データベースに格納されているダイナミックデータに問題があります。 ng-styleを使ってデータベース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> 

これは私のコントローラである必要があります。各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) { 
}); 

、データベースからのデータから"style=border-style:none/dashed"を追加する必要がありますが、これは起きていない、それは角度にバインドされていないのでng-style。

いくつかの助けをいただければ幸いです。 ありがとう

Answer 1

$ compile（html）関数は、$ 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を使用する他の方法があります。

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

これは、のようなあなたのコントローラのコードを見て作ることができます。例えば、外側のdivに、NG-クラスを使用して、条件クラスを置く：

<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

感謝を私はあなたの提案を使用しました。 CSSで次に

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

：

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

よろしく