我有一个简单的控制器想要访问一个分配有data-前缀的变量（来自服务器）。以下代码显示undefined。在这种情况下，为什么以及如何访问myId？如果data-my-id="12345"是错误的做法，那么正确的方法是什么？
链接：http://plnkr.co/edit/i4cAKgmJ1va7SHbz9h6y?p=preview
HTML：
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.2.13" src="http://code.angularjs.org/1.2.13/angular.js" data-require="angular.js@1.2.x"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p data-my-id="12345">Hello {{name}}!</p>
</body>
</html>
使用Javascript：
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'My Id is ' + $scope.myId;
});
答案 0 :(得分：2)
data-X应该在范围内发起X值的前提是错误的
当angular编译DOM时，它会检查是否存在与X匹配的指令定义
在您的情况下，没有myIdDirective，因此没有功能附加到该元素，只是具有属性的常规元素。
在这种情况下，即使ngInit也无济于事，因为控制器在预连接阶段之前被实例化。
$attrs获取属性值，如下所示：这是一个掠夺者：http://plnkr.co/edit/I1YxwWPEVFFYZAXgQJRU?p=preview
<强>模板：
<body ng-controller="MainCtrl" data-my-id="12345">
<p>Hello {{name}}!</p>
</body>
<强>控制器：
app.controller('MainCtrl', function($scope,$attrs) {
$scope.name = 'My Id is ' + $attrs.myId;
});
答案 1 :(得分：1)
如果这是绝对必要的话，那么你可以通过给<p>标签一个控制器并使用$ attrs来快速而又脏。
答案 2 :(得分：1)
更简洁的角度方式是创建一个角度指令并从那里读取值。你真的不应该使用角度控制器直接与DOM交互。
当您创建新指令时，您可以将restrict属性设置为A，并将其命名为dataMyId，以便它将绑定到具有data-my-id属性的任何元素。
然后，您可以从指令的控制器访问属性值。
答案 3 :(得分：0)
最好的方法是使用像
这样的指令<p data-my-id="12345" my-id>Hello {{name}}!</p>
并将其定义为
app.directive('myId', function() {
return function(scope, element, attr) {
scope.name = 'My Id is ' + attr.myId;
}
});