[AngularJS] A Flexible Card Directive && isolate scope

angular.module('NoteWrangler')
.directive('nwCard', function() {
  return {
    restrict: 'E',
    templateUrl: 'templates/directives/nw-card.html',
    scope: {
      header: "=",
      description: "="
    }
  };
});

 

<!-- new-card.html -->

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


<!-- index.html -->

<div class="note-wrapper">
  <div class="note-content">
    <div class="notes-header">
      <h1 title="Notes">Notes</h1>
    </div>
    <div class="note-wrapper">
      <a class="card-notes" ng-repeat="note in notes" ng-href="#/notes/{{note.id}}">
        <nw-card></nw-card>
      </a>
    </div>
  </div>
</div>

 

Making Isolation Work for You:

notes/index.html:

<div class="note-wrapper">
  <div class="note-content">
    <div class="notes-header">
      <h1 title="Notes">Notes</h1>
    </div>
    <div class="note-wrapper">
      <a class="card-notes" ng-repeat="note in notes" ng-href="#/notes/{{note.id}}">
        <nw-card header="note.title" description="note.description"></nw-card>
      </a>
    </div>
  </div>
</div>

users/index.html:

<div class="users-wrapper">
  <h1>Users</h1>

  <div class="users-wrapper">
    <a class="card-users" ng-repeat="user in users">
      <nw-card header="user.name" description="user.bio"></nw-card>
    </a>
  </div>
</div>

new-card.html:

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

angular.module('NoteWrangler')
.directive('nwCard', function() {
  return {
    restrict: 'E',
    templateUrl: 'templates/directives/nw-card.html',
    scope: {
      header: "=",
      description: "="
    }
  };
});