Question

我试图在div中追加跨度。下面是我的div代码

<div 
    id="paragraph" 
    class="paragraph"
    name="paragraph">
</div>

这是我在我的控制器中实现的代码

$scope.style_Text = {color:'#F00'};

for(var i = 0; i< $scope.paragraph.length; i++)
{
    var span = "<span ng-style='style_Text' id='c"+i+"'>"+$scope.paragraph[i]+"</span>";
    $( ".paragraph" ).append($(span));
    console.log(span);

}

在div中添加了跨度，但未应用样式。当我从控制台复制跨度并将其放在div上方时。这个范围很好。风格适用于它。

我尝试过使用 style =＆＃39; color：red;＆＃39; 而不是ng-style，它也可以。

请在这里帮助如何使用ng-style。感谢

Answer 1

你这样做的是什么？这是糟糕的模式。

您的HTML：

<div 
    id="paragraph" 
    class="paragraph"
    name="paragraph">
    <span ng-repeat="elem in list">{{ elem.xxx }}</span>
</div>

在控制器中，只需在执行某些操作后在$ scope.list中添加对象

$scope.addToList = function() {
    $scope.list.push({...}); 
}

并将角度添加到div标签内的DOM中。

如果对刷新DOM使用非角度事件模型，请使用$ scope。$ apply（）。

Answer 2

不要将jQuery与Angular混合，你真的不需要
在指令中执行所有DOM操作！
现在问你的问题，如果你真的想按照自己的方式行事

您希望此$scope.style_Text = {color:'#F00'};成为字符串，因此$scope.style_Text = '{color:\'#F00\'};'然后var span = "<span ng-style=" + $scope.style_Text + " id='c"+i+"'>"+$scope.paragraph[i]+"</span>";

但请真的做一个指示

编辑：在这样的情况下，使用ng-style而不是style本身有什么意义？

div内的跨度不适用于ng-style

2 个答案: