Merge pull request #159 from jakemmarsh/update-directive

fix directive example, make more robust

app/js/directives/example.js

@@ -5,7 +5,7 @@ function ExampleDirective() {
     templateUrl: 'directives/example.html',
     scope: {
       title: '@',
-      message: '@exampleDirective'
+      message: '@clickMessage'
     },
     link: (scope, element) => {
       element.on('click', () => {

app/views/directives/example.html

@@ -1,3 +1,4 @@
 <div class="example-directive">
-  <h1>{{title}}</h1>
+  <h1>Directive title: {{title}}</h1>
+  <p>This is an example of a directive, click me!</p>
 </div>

app/views/home.html

@@ -2,6 +2,9 @@ <h1 class="heading -large">{{ home.title | ExampleFilter }}</h1>
 
 <h3 class="heading -medium">Here is a fancy number served up courtesy of Angular: <span class="number-example">{{ home.number }}</span></h3>
 
-<img src="images/angular.png" height="100" example-directive />
+<img src="images/angular.png" height="100" />
 <img src="images/gulp.png" height="100" />
 <img src="images/browserify.png" height="100" />
+
+<hr/>
+<div example-directive title="WOW!" click-message="You clicked me!">Directive is not loaded.</div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angularjs-gulp-browserify-boilerplate",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "author": "Jake Marsh <[email protected]>",
   "description": "Boilerplate using AngularJS, SASS, Gulp, and Browserify while also utilizing best practices.",
   "repository": {

test/unit/directives/example_spec.js

@@ -4,36 +4,41 @@
 
 describe('Unit: ExampleDirective', function() {
 
-  var element, scope;
+  let element;
+  let scope;
 
   beforeEach(function() {
     spyOn(window, 'alert');
     angular.mock.module('app');
 
     angular.mock.inject(function($compile, $rootScope) {
       scope = $rootScope;
-      element = angular.element('<div example-directive="{{message}}" title="{{title}}">Sample Directive</div>');
       scope.title = 'A sample title';
-      scope.message = 'It doesn\'t hurt.';
+      scope.message = 'A sample message';
+
+      element = angular.element(
+        '<div example-directive title="{{title}}" click-message="{{message}}">Sample Directive</div>'
+      );
+
       $compile(element)(scope);
       scope.$digest();
     });
   });
 
   it('should bind itself to the element', function() {
     element.triggerHandler('click');
-    expect(window.alert).toHaveBeenCalledWith('Element clicked: It doesn\'t hurt.');
+    expect(window.alert).toHaveBeenCalledWith(`Element clicked: ${scope.message}`);
   });
 
   it('should update its bindings', function() {
-    scope.message = 'It hurts a bit.';
+    scope.message = 'A new sample message';
     scope.$digest();
     element.triggerHandler('click');
-    expect(window.alert).toHaveBeenCalledWith('Element clicked: It hurts a bit.');
+    expect(window.alert).toHaveBeenCalledWith(`Element clicked: ${scope.message}`);
   });
 
   it('should bind a title property to its template', function() {
-    expect(element.find('h1').text()).toBe('A sample title');
+    expect(element.find('h1').text()).toBe(`Directive title: ${scope.title}`);
   });
 
 });