[AngularJS] External Library Directive Ex

Make It Work 

Using the included external library, SlabText, create a wrapper directivenwSlabText so that we can use it in the NoteWrangler app.

Create a link function for the nwSlabText directive.

angular.module('NoteWrangler')
.directive('nwSlabText', function() {
  return {
    link: function(scope, element, attrs){
        element.slabText();
    }
  };
});

 

Add an attribute directive for nwSlabText to the h2 tag in the nw-card.htmltemplate.

<div class="card" title="{{title}}">
  <h2 class="h3" nw-slab-text>{{header}}</h2>
  <p>{{description}}</p>
</div>

 

We have a problem: the link function of the nwSlabText directive is being called before the element has been populated with data. To solve this, inject and use the$timeout service.

angular.module('NoteWrangler')
.directive('nwSlabText', function($timeout) {
  return {
    link: function(scope, element, attrs){
      $timeout(function(){
          $(element).slabText();
      });
    }
  };
});

 

A Popover for Note Descriptions

Instead of a Bootstrap tooltip, we are going to display additional tweeted info about a note inside our very own popover directive!

Inside a $timeout(), make a Bootstrap popover, to replace the default tooltip on hover, by passing the popover() method { trigger: 'hover' }. Refer to theBootstrap API docs for the popover() method and parameters. Don't forget to rename our directive to 'popover'.

angular.module('NoteWrangler')
.directive('popover', function($timeout) {
  return function(scope, element) {
    $timeout(function(){
      $(element).popover({
        trigger: 'hover'
      });    
    });
  };
});

 

Now, use our brand spankin' new popover directive to display the note's title on hover.

<div class="card" popover="{{note.title}} {{note.tweetedDate | date: 'MMM. dd'}}">
          <h2 class="h3">{{note.title}}</h2>
          <p>{{note.tweetedDate | date: "'Tweeted on a' EEEE 'in' MMMM"}}</p>
        </div>

 

Using the attributes argument of the function returned by our new popover directive, make note attributes available to our popover by providing them as content in the options object passed to popover(). Note: the attributes argument is the third argument for the function returned by the popover directive, after scope andelement.

angular.module('NoteWrangler')
.directive('popover', function($timeout) {
  return function(scope, element, attrs) {
    $timeout(function(){
      $(element).popover({
        trigger: 'hover',
        content: attrs.popover
      });    
    });
  };
});

 

Clean up after our popover directive when $destroy is fired on scope.

angular.module('NoteWrangler')
.directive('popover', function($timeout) {
  return function(scope, element, attrs) {
    $timeout(function(){
      $(element).popover({
        trigger: 'hover',
        content: attrs.popover
      });    
    });
    
    scope.$on('$destroy', function() {
      $(element).popover('destroy');
    });
  };
});