如何正确使用 ng-class 或 angular.element？答案

【问题标题】：How to use ng-class or angular.element correctly?如何正确使用 ng-class 或 angular.element？
【发布时间】：2012-09-23 04:45:03
【问题描述】：

我正在接收动态数据（json 格式），并且需要更改按钮的背景图像。每个按钮都有 ID，因此很容易知道哪个按钮将被操作。

但是当我尝试动态处理按钮的背景图像时，我遇到了问题。

按钮示例：

<button id="1111_1111_c">Value1</button>
<button id="2222_2222_d">Value1</button>

我尝试过这样操作：（使用 JQuery）

var btnId = '2222_2222_d';
$('#' + btnId).css('background-image','url(images/btn_red.gif)');

但它什么也没发生。如果我尝试与纯 JQuery 相同，它可以工作。

我知道有角度 dom-updater 或事件来更新 dom。但不知道该怎么做。

是否有使用指令或使用 ng-class 的解决方案？

谢谢！

【问题讨论】：

【解决方案1】：

在 Angular 中，我们想考虑更改 model/$scope 属性，然后会自动更新 HTML 视图。（我们不希望/不需要使用 ID。）因此，在您要更改的按钮上声明一个模型属性：

<button ng-class="button_1111_class" id=...>Value1</button>

（上图，button_1111_class 是 $scope 上的一个属性。）然后，当您获取数据时，修改控制器中的 button_1111_class 模型数据，例如：

$scope.button_1111_class = 'red_bg_image';  // red_bg_image is a CSS class you define

您的视图应该会自动更新。

如果您在 AngularJS 之外获取数据，您可能需要将模型/$scope 更改包装在 $scope.$apply() 中：The view is not updated in AngularJS

【讨论】：

当按钮被动态创建时，我怎样才能调用带有类的按钮？有没有可能：$scope[button_1111_class] = 'red_bg_image'; ?因为我不知道类名
动态创建了什么，按钮和/或这些按钮的背景图像？（我认为按钮已经存在，而您只是更改背景图像。）您可以创建一个小提琴来显示您的问题吗？ pkozlowskios.wordpress.com/2012/08/12/…