从动态html绑定ng样式
从动态html绑定ng样式
提问于 2016-06-13 08:51:24
我对存储在数据库中的一些动态数据有问题。我用ng风格存储在数据库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没有绑定到角。
我们应该感谢一些帮助。谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-06-13 08:54:43
$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类的条件类：
<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';Stack Overflow用户
发布于 2016-06-13 11:49:45
谢谢我采纳了你的建议。
div ng-class="{'edit-mode': editModeEnabled }" ng-bind- html="validData | unsafe"/>然后在CSS中：
.edit-mode .row > div {
border-style: dashed;
}问候
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37785394
复制相关文章
相似问题
腾讯云开发者
