Retrieving the data from data-attribute with 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.

Is there a reason you can't declare it as part of the scope? scope: { dataEmail: '=' }, then you could access it in your directive by $scope.dataEmail (though I would just call it email) — Amicable
– Amicable, Commented Jul 16, 2015 at 8:34
@alisabzevari, i tried what you suggested and logged it but comes back undefined — GY22
– GY22, Commented Jul 16, 2015 at 8:49
@Amicable, i adjusted the scope from scope: true, to scope: { email: '=' } but no changes ... — GY22
– GY22, Commented Jul 16, 2015 at 8:50

Amicable · Accepted Answer · 2015-07-16 09:27:04Z

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

Collectives™ on Stack Overflow

Retrieving the data from data-attribute with AngularJs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related