title: AngularJS Directive testing a elm.on() binding
body: <p>Im getting errors on my unit tests with the following directive:</p>
  
  <pre><code>.directive('flashMessage', function() {
      return {
          restrict: "E",
          replace: true,
          template: "&lt;div class='alert alert-{{flash.alert}}'&gt;{{flash.msg}}&lt;/div&gt;",
          scope: {
              flash: "="
          },
          link: function(scope, elem, attrs)
          {
              elem.on('click', function() {
                  elem.hide('slow');
              });
  
              scope.$watch('flash', function() {
                  if (scope.flash) {
                      elem.slideDown('slow');
                  } else {
                      elem.hide();
                  }
              });
          }
      };
  })
  </code></pre>
  
  <p>The unit test :</p>
  
  <pre><code>describe('Flash Messenger', function()
  {
      var elm, html, scope;
  
      beforeEach(module('common.directives'));
  
      beforeEach(inject(['$compile', '$rootScope', function($c, $r) {
          $compile = $c;
          $rootScope = $r.$new();
          elm = angular.element('&lt;flash-message flash="flash"&gt;&lt;/flash-message&gt;');
          console.log('BEFORE', elm);
          $compile(elm)($rootScope);
          $rootScope.$digest();
      }]));
  
      // tests start here
      it('should have an alert of success', function()
      {
          $rootScope.flash = {"alert":"success", "msg":"Success"};
          $rootScope.$digest();
      });
  });
  </code></pre>
  
  <p>The Result:</p>
  
  <pre><code>LOG: 'BEFORE', Object{0: &lt;flash-message flash="flash"&gt;&lt;/flash-message&gt;, length: 1}
  Chrome 34.0.1847 (Windows 8) Flash Messenger should have an alert of success FAILED
          TypeError: undefined is not a function
              at link (E:/Repos/sandown/Source/Dev/site/js/directives.js?80b1c100e6d9acbd3c73fe2379761915ab1e05c0:9:18839)
              at k (E:/Repos/sandown/Source/Dev/site/client-src/angular-1.1.5/angular.min.js?8e113b67065c1c7245ea2e7aa89ea86860f32a85:44:444)
              at e (E:/Repos/sandown/Source/Dev/site/client-src/angular-1.1.5/angular.min.js?8e113b67065c1c7245ea2e7aa89ea86860f32a85:40:139)
              at E:/Repos/sandown/Source/Dev/site/client-src/angular-1.1.5/angular.min.js?8e113b67065c1c7245ea2e7aa89ea86860f32a85:39:205
              at null.&lt;anonymous&gt; (E:/Repos/sandown/Source/Dev/site/tests/unit/directives.test.js:12:16)
              at Object.d [as invoke] (E:/Repos/sandown/Source/Dev/site/client-src/angular-1.1.5/angular.min.js?8e113b67065c1c7245ea2e7aa89ea86860f32a85:28:304)
              at workFn (E:/Repos/sandown/Source/Dev/site/tests/lib/angular/angular-mocks.js:1876:20)
          Error: Declaration Location
              at window.inject.angular.mock.inject (E:/Repos/sandown/Source/Dev/site/tests/lib/angular/angular-mocks.js:1862:25)
              at null.&lt;anonymous&gt; (E:/Repos/sandown/Source/Dev/site/tests/unit/directives.test.js:7:13)
              at E:/Repos/sandown/Source/Dev/site/tests/unit/directives.test.js:1:1
  </code></pre>
  
  <p>From what I can see is that the elm does not have the .on function or the .slideDown function. How do I go about testing this?</p>