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>

这应该是我的控制者。

$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它没有绑定到角度。

应该感谢一些帮助。感谢

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;
}

问候

从动态html

2 个答案: