Angularjs |如何从定义控制器的元素中获取属性值答案

【问题标题】：Angularjs | how to get an attribute value from element in which controller is definedAngularjs |如何从定义控制器的元素中获取属性值
【发布时间】：2015-06-11 16:52:55
【问题描述】：

我仍在与 Angular 中的简单事物作斗争。我有 jQuery 和 Backbonejs 背景，所以请不要对我大喊大叫。我努力理解差异

我有 HTML，其中来自 rails 的项目 ID 为 data-project-id：

<div data-ng-controller="ProjectCtrl as ctrl" data-project-id="1" id="project_configuration">

有没有机会访问这个属性？我的 API 调用需要它...

【问题讨论】：

您可以使用 angularjs 提供的 jqlite，它是 jQuery 在角度领域的替代品，但是您可能希望以其他方式执行此操作，从 HTML 读取数据不是您想要制作模型的角度方式除非你在处理指令，否则这样做。

标签： angularjs dom

【解决方案1】：

要从控制器访问元素属性，请将$attrs 注入控制器函数：

HTML

<div test="hello world" ng-controller="ctrl">
</div>

脚本

app.controller('ctrl', function($attrs) {
  alert($attrs.test); // alerts 'hello world'
});

在您的示例中，如果您想获取 data-project-id：

$attrs.projectId

或者如果你想获取id：

$attrs.id

演示：

var app = angular.module('app',[]);
app.controller('ctrl', function($attrs) {
  alert($attrs.test);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" test="hello world">
  
</div>

【讨论】：

对我来说 $attrs 是未定义的，你有什么工作小提琴要展示吗？
您假设他们正在使用自定义指令。这可能就是 $attrs 未定义的原因。因为它们可能只是在视图的控制器而不是指令的控制器中。

【解决方案2】：

在 Angular 世界中，您应该使用指令来操作 DOM 元素。这里很好地解释了如何从自定义指令 (How to get evaluated attributes inside a custom directive) 中获取属性值。

但如果你仍然想从控制器中获取它的价值，你也可以使用 jQuery $('#project_configuration').data('project-id')

【讨论】：

从控制器内部使用 jquery 不是一个好习惯。指令是使用 jquery 的最佳场所。