使用AngularJs从数据属性中检索数据

我正在开发一个团队计划pipe理器，用户可以在点击主体并在canvas上拖动时创build一个贴图（=任务）。 我正在尝试将创build的任务链接到正确的用户。 在屏幕左侧，我有一个用户列表。 现在任务只是随机放置在网格上。 网格逻辑由行和列组成。 所以我想我首先确定每个用户的位置，然后把任务的位置链接到用户。

我正在与Angular和Node合作创build这个团队策划者

通过自定义指令我获得了用户的位置（我的app.js文件的代码的一部分）：

$rootScope = {}; $rootScope.users = []; contentEditor.directive('custom', function($document) { return { restrict: 'E', scope: true, link: function(scope, element, attrs) { var mail = $(element[0]).attr('data-email'); console.log("mail ", $(element).attr('data-email')); $rootScope.users.push({"top ":element[0].offsetTop, }); console.log(scope) console.log("Y positon of a user circle " + element[0].offsetTop); } } }); 

部分的html代码：

  <!-- START SIDEBAR --> <div id="sidebar" class="md-whiteframe-z4"> <img id="logo" src="images/logo.png" alt="" > <div class="userList"> <ul> <li ng-repeat="user in userInfo" id="userPos" class="circular" data-email="{{user.email}}"><p class="initials"><custom></custom>{{user.initials}}</p></li> </ul> </div> </div> <!-- END SIDEBAR --> 

要更好地了解我的应用，请查看此链接 – > http://gyazo.com/2e011b0e38bc1e36c198bbaa322ad06c

我的问题是如何从我的数据属性访问数据电子邮件（请参阅列表项）。 现在，当我尝试访问它时，它返回undefined。

Answer 1

首先，它看起来像你试图访问你的指令范围以外的属性。

虽然这可能是JQuery的可能，但是这是一个坏主意，因为指令只能处理其中的数据。 这意味着它们可以在应用程序的任何地方重用，而不必依靠以某种方式设置的外部数据。

所以，而不是你目前的标记。

 <li ng-repeat="user in userInfo" id="userPos" class="circular" data-email="{{user.email}}"> <p class="initials"> <custom></custom>{{user.initials}} </p> </li> 

使用这个，它把你的指令可以访问它的属性。

 <li ng-repeat="user in userInfo" id="userPos" class="circular"> <p class="initials"> <custom email="user.email"></custom> {{user.initials}} </p> </li> 

我认为最好是使用指令的范围variables，如果你只是在指令的链接阶段使用属性。 所以像这样修改你的指令。

为范围属性指定'='意味着如果电子邮件variables在指令范围之外更新（例如，在您的控制器中），则更改也将反映在指令中。

 contentEditor.directive('custom', function($document) { return { restrict: 'E', scope: { email: '=' }, link: function(scope, element, attrs) { console.log("User email is: " + scope.email); } } });