将style属性应用于angular js中的ng-bind指令

时间:2014-01-10 13:58:15

标签: angularjs angularjs-directive

我们在角度js中使用ng-bind指令创建了div。我们无法将样式属性应用于同一个div

<div ng-bind-html="test"></div>

在控制器文件中我将测试变量定义为

$scope.test="<div style="background:red;"></div>

我们需要应用style属性。使用CSS属性,我能够做到。但每次需要更改背景时。

2 个答案:

答案 0 :(得分:5)

可能是你想要的:

<div ng-style="{'background-color': bgColor}"></div>
控制器中的

答案 1 :(得分:2)

我不知道你想要什么,但你的代码唯一不对的是你没有ng-bind-html-unsafe ...假设你正在使用一个版本的角度&lt; 1.2。

ng-bind-html通过$sanitize服务运行代码,该服务检查不安全的代码。在你的例子中我和&#34;风格&#34;将被剥夺。不安全的版本不会执行此检查,因此如果您在某些情况下使用它而无法完全控制(例如WYSIWYG编辑器保存到您的数据库并显示注释)。您可以让那些混乱的数据运行恶意脚本。

示例小提琴:http://jsfiddle.net/pW7WY/

支持代码。

<div ng-app>
    <div ng-controller="Ctrl">
       <div id="nick" ng-bind-html-unsafe="test"></div>
    </div>
</div>


--js
function Ctrl($scope) {
   $scope.test='<div id="child" style="background:red;"></div>'
}

--css
#nick{
    width: 300px;
    height: 300px;
}
#child{
    width: 200px;
    height: 200px;      
}