通过jQuery添加ng样式属性，angular不更新

Adding ng-style attribute via jQuery, angular not updating

本文关键字：angular 更新 属性 样式 jQuery 添加 ng 通过      更新时间：2023-09-26

下面是一个演示问题的plunker：http://plnkr.co/edit/1ceWH9o2WNVnUUoWE6Gm

代码：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    console.log('yeah');
    var header = $('#weird');
    console.log(header);
    header.attr("ng-style", "{'background-color' : 'red'}")
});

它添加了ng样式属性，但angular不知道它，所以它从未应用过。

这是我尝试做的一个简化版本，我尝试向chesborard.js生成的棋盘中的每个正方形添加一个ng样式属性。我通过将ng样式属性添加到编译函数内部的每个正方形来实现这一点，就像将ng样式特性添加到标头一样。如果有更好的方法可以做到这一点，我很想知道。如果没有，当添加ng样式属性时，我如何才能更新angular？

我读过关于$scope、$digest和$apply的书，也试过和它们玩，但一直没能弄清楚。实现这一目标的最佳方法是什么？

这取决于指令的确切工作方式，但在ngStyle的情况下，您可能需要重新编译一个元素：

app.controller('myCtrl', function($scope, $compile) {
    console.log('yeah');
    var header = $('#weird');
    console.log(header);
    header.attr("ng-style", "{'background-color' : 'red'}");
    $compile(header)($scope);
});

$apply通常是在Angular与普通JS/jQuery混合时提出的，但只有在范围绑定需要更新时才有意义，事实并非如此。此外，当异步回调发生时，这是有意义的，但应用了控制器构造函数期间发生的范围更改（没有区分角度和非角度内容的魔法，所以如果您在不必触发摘要的情况下触发摘要，就会出现"$apply-assembly in progress"）。

我想你是有意使用jQuery的，我可以让你省去"angular讨厌jQuery选择器bad bad you doing wrong"的单调乏味。

相关文章：