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

Question

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

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);
        }
    }
});

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

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

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.

Answer 1

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

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>

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.

Specifying '=' for the scope attribute means that if the email variable is updated outside of the scope of the directive (eg 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);
        }
    }
});