Angularjs directive - cannot retrieve value from isolated scope

Question

I have a custom directive to format datetime. I use it in multiple views and it seems to work across the board, except for one instance. When request.created is passed to it (HTML further below), the first console.log(scope) indicates "date" is correctly set and passed to the directive. But console.log(scope.date) prints empty.

I all works fine other views and several "email.sendDate"s in the same view.

The value of request is retrieved from server and set by controller.

myApp.directive('friendlydate', function () {
   function link(scope, element, attrs) {
       console.log(scope);
       console.log(scope.date);
       var uglydate = scope.date;
       //do stuff
        scope.formatteddate = prettydate;
    };

   return {
       restrict: 'E',
       scope: {
         date: '@'
       },
       link: link,
       template: '{{formatteddate}}'
   };
});

In my html, I have

<div class="col-md-6">
  <dl class="dl-horizontal">
    <dt>Created</dt>
    <dd>
      <friendlydate date="{{request.created}}"></friendlydate>
    </dd>
    <dt>IP Address</dt>
    <dd>{{request.ipAddress}}</dd>
    <dt>Browser</dt>
    <dd>{{request.browser}}</dd>
  </dl>
</div>

<table>
  <tbody ng-repeat="email in request.emails">
    <tr>
      <td>
        <friendlydate date="{{email.sendDate}}"></friendlydate>
      </td>
      <td>{{email.subject}}</td>
      <td>{{emailStatus(email.status)}}</td>
      <td><button class="btn btn-primary">view</button></td>
    </tr>
  </tbody>
</table>

enter image description here

Let me know if more info is required. I am on the verge of going nuts, please help.

Can you show the output of console.log(scope); and console.log(scope.date)? — shivas
– shivas, Commented Apr 26, 2015 at 13:36
I have already done that (the image below html). The empty white line is scope.date. It shows part of console.log(scope) which has the "date" in it, set to 26/04/2000. — Hossein
– Hossein, Commented Apr 26, 2015 at 14:21

Konammagari · Accepted Answer · 2015-04-26 14:49:17Z

1

Your data is retreived from server and set by controller.There might be a delay in your response If that is the case my solution works for you.

use ng-if in your view :

<friendlydate date="{{request.created}}" data-ng-if="request.created"></friendlydate>

Or you can use scope.$watch in your directive :

myApp.directive('friendlydate', function () {
function link(scope, element, attrs) {
    scope.$watch(function () {
        console.log(scope);
        console.log(scope.date);
        var uglydate = scope.date;
        //do stuff
        scope.formatteddate = prettydate;
    });
};

return {
    restrict: 'E',
    scope: {
        date: '@'
    },
    link: link,
    template: '{{formatteddate}}'
};

});

answered Apr 26, 2015 at 14:49

Konammagari

3642 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matias Fernandez Martinez · Accepted Answer · 2015-04-26 14:26:04Z

1

I recommend you a different approach it will be more clean for the views and easy to maintain.

User a filter

angular.module('myApp.filters', [])
.filter('frieldyDate', function($moment, $translate) {
  return function(value, format) {
    if(format){
      // you can pass parameters and return custom formats
      // return formatWithFormat(value,format);
    }
    return friendlyFormat(value);
  };
});

And your template will be

<div class="col-md-6">
  <dl class="dl-horizontal">
    <dt>Created</dt>
    <dd> {{request.created | friendlyDate: 'MM/YYY'}} </dd>
    <dt>IP Address</dt>
    <dd>{{request.ipAddress}}</dd>
    <dt>Browser</dt>
    <dd>{{request.browser}}</dd>
  </dl>
</div>

<table>
  <tbody ng-repeat="email in request.emails">
    <tr>
      <td>{{email.sendDate | friendlyDate}} </td>
      <td>{{email.subject}}</td>
      <td>{{emailStatus(email.status)}}</td>
      <td><button class="btn btn-primary">view</button></td>
    </tr>
  </tbody>
</table>

Also y recommend you to use angular-moment for different date's format

answered Apr 26, 2015 at 14:26

Matias Fernandez Martinez

1,88513 silver badges15 bronze badges

1 Comment

Hossein Over a year ago

Thanks for your response. I have not marked this as the answer as it does not tell me how to solve the issue, rather it suggests an alternative. I do agree with you that a filter is more suited to my use case though. I think it's more elegant and I have up-voted your answer.

Collectives™ on Stack Overflow

Angularjs directive - cannot retrieve value from isolated scope

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related