Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

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.

share|improve this question
    
Did you try $(element[0]).data('email')? – alisabzevari Jul 16 '15 at 8:28
    
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 Jul 16 '15 at 8:34
    
@alisabzevari, i tried what you suggested and logged it but comes back undefined – GY22 Jul 16 '15 at 8:49
    
@Amicable, i adjusted the scope from scope: true, to scope: { email: '=' } but no changes ... – GY22 Jul 16 '15 at 8:50
up vote 1 down vote accepted

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);
        }
    }
});
share|improve this answer
    
thanks very must it works – GY22 Jul 16 '15 at 9:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.