从与AngularJs数据属性检索数据 [英] Retrieving the data from data-attribute with AngularJs

问题描述

我的工作团队规划师经理，对身体的点击和拖动它周围的画布时，用户可以创建一个tile（=任务）。我试图创建的任务链接到正确的用户。在屏幕的左边我有用户的列表。现在的任务只是随意放置在网格上。格栅逻辑是由行和列组成。所以我想我首先确定每个用户的y现在的位置，然后链接的任务的位置给用户。

I am working on a team planner manager where the user can create a tile(=task) when clicking on the body and dragging it around the canvas. I am trying to link the created task to the correct user. On the left of the screen I have a list of users. Now the task are just placed random on the grid. The grids logic is made up of rows and columns. So I thought I first determine the y postion of each user and then link the position on the task to the user.

我跟角和节点努力创造这个团队策划者

I am working with Angular and Node to create this team planner

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

Via a custom directive i obtained the user position (part of the code of my app.js file):

$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 code的部分：

Part of the html code:

   <!-- 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

To get a better idea of my app check out this link -> http://gyazo.com/2e011b0e38bc1e36c198bbaa322ad06c

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

My question is how to access the data email from my data attribute (see list item). Now it returns undefined when I try to access it.

推荐答案

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

Firstly it looks like you are trying to access an attribute outside of the scope of your directive.

虽然这可能是可能使用jQuery，这将是一个糟糕的主意，因为指令都应该只在其中的数据处理。这意味着他们可以在任何地方在应用程序中，而不必依赖于被设置外部数据以某种方式被重复使用。

While this could be possible with JQuery, it would be a bad idea as directives are supposed to only deal with the data within them. This means they can be reused anywhere in your application without having to rely on external data being set up in a certain way.

因此​​，代替目前的标记了。

So instead of your current mark up.

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

使用此，这使该属性在您的指令可以访问它。

Use this, which puts the attribute where your directive can access it.

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

我认为这是preferable如果你只使用属性的指令链接阶段利用指令的范围变量。因此，修改您的指令，像这样。

I think it's preferable to utilise the scope variable of a directive if you're only using the attribute in the link stage of a directive. So modify your directive like so.

指定=的scope属性意味着，如果电子邮件变量在指令范围之外的更新（如控制器），那么变化会体现在指令还。

Specifying '=' for the scope attribute means that if the email variable is updated outside of the scope of the directive (e.g. in your controller) then the changes will be reflected in the directive also.

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

这篇关于从与AngularJs数据属性检索数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！