refactor(directives): connect new compiler

- turn everything into a directive

1 files changed, 117 insertions, 130 deletions

diff --git a/test/directivesSpec.js b/test/directivesSpec.js
index 5bd5f5bd..9dee4860 100644
--- a/test/directivesSpec.js
+++ b/test/directivesSpec.js
@@ -1,6 +1,16 @@
 'use strict';
 
 describe("directive", function() {
+  var element;
+
+  beforeEach(function() {
+    element = null;
+  });
+
+  afterEach(function() {
+    dealoc(element);
+  });
+
 
   var $filterProvider, element;
 
@@ -19,7 +29,7 @@ describe("directive", function() {
 
   describe('ng:bind', function() {
     it('should set text', inject(function($rootScope, $compile) {
-      var element = $compile('<div ng:bind="a"></div>')($rootScope);
+      element = $compile('<div ng:bind="a"></div>')($rootScope);
       expect(element.text()).toEqual('');
       $rootScope.a = 'misko';
       $rootScope.$digest();
@@ -28,47 +38,40 @@ describe("directive", function() {
     }));
 
     it('should set text to blank if undefined', inject(function($rootScope, $compile) {
-      var element = $compile('<div ng:bind="a"></div>')($rootScope);
+      element = $compile('<div ng:bind="a"></div>')($rootScope);
       $rootScope.a = 'misko';
       $rootScope.$digest();
       expect(element.text()).toEqual('misko');
       $rootScope.a = undefined;
       $rootScope.$digest();
       expect(element.text()).toEqual('');
+      $rootScope.a = null;
+      $rootScope.$digest();
+      expect(element.text()).toEqual('');
     }));
 
     it('should set html', inject(function($rootScope, $compile) {
-      var element = $compile('<div ng:bind="html|html"></div>')($rootScope);
+      element = $compile('<div ng:bind-html="html"></div>')($rootScope);
       $rootScope.html = '<div unknown>hello</div>';
       $rootScope.$digest();
       expect(lowercase(element.html())).toEqual('<div>hello</div>');
     }));
 
     it('should set unsafe html', inject(function($rootScope, $compile) {
-      var element = $compile('<div ng:bind="html|html:\'unsafe\'"></div>')($rootScope);
+      element = $compile('<div ng:bind-html-unsafe="html"></div>')($rootScope);
       $rootScope.html = '<div onclick="">hello</div>';
       $rootScope.$digest();
       expect(lowercase(element.html())).toEqual('<div onclick="">hello</div>');
     }));
 
-    it('should set element element', inject(function($rootScope, $compile) {
-      $filterProvider.register('myElement', valueFn(function() {
-        return jqLite('<a>hello</a>');
-      }));
-      var element = $compile('<div ng:bind="0|myElement"></div>')($rootScope);
-      $rootScope.$digest();
-      expect(lowercase(element.html())).toEqual('<a>hello</a>');
-    }));
-
-
     it('should suppress rendering of falsy values', inject(function($rootScope, $compile) {
-      var element = $compile('<div>{{ null }}{{ undefined }}{{ "" }}-{{ 0 }}{{ false }}</div>')($rootScope);
+      element = $compile('<div>{{ null }}{{ undefined }}{{ "" }}-{{ 0 }}{{ false }}</div>')($rootScope);
       $rootScope.$digest();
       expect(element.text()).toEqual('-0false');
     }));
 
     it('should render object as JSON ignore $$', inject(function($rootScope, $compile) {
-      var element = $compile('<div>{{ {key:"value", $$key:"hide"}  }}</div>')($rootScope);
+      element = $compile('<div>{{ {key:"value", $$key:"hide"}  }}</div>')($rootScope);
       $rootScope.$digest();
       expect(fromJson(element.text())).toEqual({key:'value'});
     }));
@@ -76,27 +79,15 @@ describe("directive", function() {
 
   describe('ng:bind-template', function() {
     it('should ng:bind-template', inject(function($rootScope, $compile) {
-      var element = $compile('<div ng:bind-template="Hello {{name}}!"></div>')($rootScope);
+      element = $compile('<div ng:bind-template="Hello {{name}}!"></div>')($rootScope);
       $rootScope.name = 'Misko';
       $rootScope.$digest();
       expect(element.hasClass('ng-binding')).toEqual(true);
       expect(element.text()).toEqual('Hello Misko!');
     }));
 
-    it('should have $element set to current bind element', inject(function($rootScope, $compile) {
-      var innerText;
-      $filterProvider.register('myFilter', valueFn(function(text) {
-        innerText = innerText || this.$element.text();
-        return text;
-      }));
-      var element = $compile('<div>before<span ng:bind-template="{{\'HELLO\'|myFilter}}">INNER</span>after</div>')($rootScope);
-      $rootScope.$digest();
-      expect(element.text()).toEqual("beforeHELLOafter");
-      expect(innerText).toEqual('INNER');
-    }));
-
     it('should render object as JSON ignore $$', inject(function($rootScope, $compile) {
-      var element = $compile('<pre>{{ {key:"value", $$key:"hide"}  }}</pre>')($rootScope);
+      element = $compile('<pre>{{ {key:"value", $$key:"hide"}  }}</pre>')($rootScope);
       $rootScope.$digest();
       expect(fromJson(element.text())).toEqual({key:'value'});
     }));
@@ -105,39 +96,40 @@ describe("directive", function() {
 
   describe('ng:bind-attr', function() {
     it('should bind attributes', inject(function($rootScope, $compile) {
-      var element = $compile('<div ng:bind-attr="{src:\'http://localhost/mysrc\', alt:\'myalt\'}"/>')($rootScope);
+      element = $compile('<div ng:bind-attr="{src:\'http://localhost/mysrc\', alt:\'myalt\'}"/>')($rootScope);
       $rootScope.$digest();
       expect(element.attr('src')).toEqual('http://localhost/mysrc');
       expect(element.attr('alt')).toEqual('myalt');
     }));
 
     it('should not pretty print JSON in attributes', inject(function($rootScope, $compile) {
-      var element = $compile('<img alt="{{ {a:1} }}"/>')($rootScope);
+      element = $compile('<img alt="{{ {a:1} }}"/>')($rootScope);
       $rootScope.$digest();
       expect(element.attr('alt')).toEqual('{"a":1}');
     }));
-  });
 
-  it('should remove special attributes on false', inject(function($rootScope, $compile) {
-    var element = $compile('<input ng:bind-attr="{disabled:\'{{disabled}}\', readonly:\'{{readonly}}\', checked:\'{{checked}}\'}"/>')($rootScope);
-    var input = element[0];
-    expect(input.disabled).toEqual(false);
-    expect(input.readOnly).toEqual(false);
-    expect(input.checked).toEqual(false);
-
-    $rootScope.disabled = true;
-    $rootScope.readonly = true;
-    $rootScope.checked = true;
-    $rootScope.$digest();
-
-    expect(input.disabled).toEqual(true);
-    expect(input.readOnly).toEqual(true);
-    expect(input.checked).toEqual(true);
-  }));
+    it('should remove special attributes on false', inject(function($rootScope, $compile) {
+      element = $compile('<input ng:bind-attr="{disabled:\'{{disabled}}\', readonly:\'{{readonly}}\', checked:\'{{checked}}\'}"/>')($rootScope);
+      var input = element[0];
+      expect(input.disabled).toEqual(false);
+      expect(input.readOnly).toEqual(false);
+      expect(input.checked).toEqual(false);
+
+      $rootScope.disabled = true;
+      $rootScope.readonly = true;
+      $rootScope.checked = true;
+      $rootScope.$digest();
+
+      expect(input.disabled).toEqual(true);
+      expect(input.readOnly).toEqual(true);
+      expect(input.checked).toEqual(true);
+    }));
+
+  });
 
   describe('ng:click', function() {
     it('should get called on a click', inject(function($rootScope, $compile) {
-      var element = $compile('<div ng:click="clicked = true"></div>')($rootScope);
+      element = $compile('<div ng:click="clicked = true"></div>')($rootScope);
       $rootScope.$digest();
       expect($rootScope.clicked).toBeFalsy();
 
@@ -146,14 +138,12 @@ describe("directive", function() {
     }));
 
     it('should stop event propagation', inject(function($rootScope, $compile) {
-      var element = $compile('<div ng:click="outer = true"><div ng:click="inner = true"></div></div>')($rootScope);
+      element = $compile('<div ng:click="outer = true"><div ng:click="inner = true"></div></div>')($rootScope);
       $rootScope.$digest();
       expect($rootScope.outer).not.toBeDefined();
       expect($rootScope.inner).not.toBeDefined();
 
-      var innerDiv = element.children()[0];
-
-      browserTrigger(innerDiv, 'click');
+      browserTrigger(element.find('div'), 'click');
       expect($rootScope.outer).not.toBeDefined();
       expect($rootScope.inner).toEqual(true);
     }));
@@ -162,7 +152,7 @@ describe("directive", function() {
 
   describe('ng:submit', function() {
     it('should get called on form submit', inject(function($rootScope, $compile) {
-      var element = $compile('<form action="" ng:submit="submitted = true">' +
+      element = $compile('<form action="" ng:submit="submitted = true">' +
         '<input type="submit"/>' +
         '</form>')($rootScope);
       $rootScope.$digest();
@@ -175,7 +165,7 @@ describe("directive", function() {
 
   describe('ng:class', function() {
     it('should add new and remove old classes dynamically', inject(function($rootScope, $compile) {
-      var element = $compile('<div class="existing" ng:class="dynClass"></div>')($rootScope);
+      element = $compile('<div class="existing" ng:class="dynClass"></div>')($rootScope);
       $rootScope.dynClass = 'A';
       $rootScope.$digest();
       expect(element.hasClass('existing')).toBe(true);
@@ -196,7 +186,7 @@ describe("directive", function() {
 
 
     it('should support adding multiple classes via an array', inject(function($rootScope, $compile) {
-      var element = $compile('<div class="existing" ng:class="[\'A\', \'B\']"></div>')($rootScope);
+      element = $compile('<div class="existing" ng:class="[\'A\', \'B\']"></div>')($rootScope);
       $rootScope.$digest();
       expect(element.hasClass('existing')).toBeTruthy();
       expect(element.hasClass('A')).toBeTruthy();
@@ -227,7 +217,7 @@ describe("directive", function() {
 
 
     it('should support adding multiple classes via a space delimited string', inject(function($rootScope, $compile) {
-      var element = $compile('<div class="existing" ng:class="\'A B\'"></div>')($rootScope);
+      element = $compile('<div class="existing" ng:class="\'A B\'"></div>')($rootScope);
       $rootScope.$digest();
       expect(element.hasClass('existing')).toBeTruthy();
       expect(element.hasClass('A')).toBeTruthy();
@@ -236,7 +226,7 @@ describe("directive", function() {
 
 
     it('should preserve class added post compilation with pre-existing classes', inject(function($rootScope, $compile) {
-      var element = $compile('<div class="existing" ng:class="dynClass"></div>')($rootScope);
+      element = $compile('<div class="existing" ng:class="dynClass"></div>')($rootScope);
       $rootScope.dynClass = 'A';
       $rootScope.$digest();
       expect(element.hasClass('existing')).toBe(true);
@@ -253,7 +243,7 @@ describe("directive", function() {
 
 
     it('should preserve class added post compilation without pre-existing classes"', inject(function($rootScope, $compile) {
-      var element = $compile('<div ng:class="dynClass"></div>')($rootScope);
+      element = $compile('<div ng:class="dynClass"></div>')($rootScope);
       $rootScope.dynClass = 'A';
       $rootScope.$digest();
       expect(element.hasClass('A')).toBe(true);
@@ -269,119 +259,116 @@ describe("directive", function() {
 
 
     it('should preserve other classes with similar name"', inject(function($rootScope, $compile) {
-      var element = $compile('<div class="ui-panel ui-selected" ng:class="dynCls"></div>')($rootScope);
+      element = $compile('<div class="ui-panel ui-selected" ng:class="dynCls"></div>')($rootScope);
       $rootScope.dynCls = 'panel';
       $rootScope.$digest();
       $rootScope.dynCls = 'foo';
       $rootScope.$digest();
-      expect(element[0].className).toBe('ui-panel ui-selected ng-directive foo');
+      expect(element[0].className).toBe('ui-panel ui-selected foo');
     }));
 
 
     it('should not add duplicate classes', inject(function($rootScope, $compile) {
-      var element = $compile('<div class="panel bar" ng:class="dynCls"></div>')($rootScope);
+      element = $compile('<div class="panel bar" ng:class="dynCls"></div>')($rootScope);
       $rootScope.dynCls = 'panel';
       $rootScope.$digest();
-      expect(element[0].className).toBe('panel bar ng-directive');
+      expect(element[0].className).toBe('panel bar');
     }));
 
 
     it('should remove classes even if it was specified via class attribute', inject(function($rootScope, $compile) {
-      var element = $compile('<div class="panel bar" ng:class="dynCls"></div>')($rootScope);
+      element = $compile('<div class="panel bar" ng:class="dynCls"></div>')($rootScope);
       $rootScope.dynCls = 'panel';
       $rootScope.$digest();
       $rootScope.dynCls = 'window';
       $rootScope.$digest();
-      expect(element[0].className).toBe('bar ng-directive window');
+      expect(element[0].className).toBe('bar window');
     }));
 
 
     it('should remove classes even if they were added by another code', inject(function($rootScope, $compile) {
-      var element = $compile('<div ng:class="dynCls"></div>')($rootScope);
+      element = $compile('<div ng:class="dynCls"></div>')($rootScope);
       $rootScope.dynCls = 'foo';
       $rootScope.$digest();
       element.addClass('foo');
       $rootScope.dynCls = '';
       $rootScope.$digest();
-      expect(element[0].className).toBe('ng-directive');
     }));
 
 
     it('should convert undefined and null values to an empty string', inject(function($rootScope, $compile) {
-      var element = $compile('<div ng:class="dynCls"></div>')($rootScope);
+      element = $compile('<div ng:class="dynCls"></div>')($rootScope);
       $rootScope.dynCls = [undefined, null];
       $rootScope.$digest();
-      expect(element[0].className).toBe('ng-directive');
     }));
-  });
 
 
-  it('should ng:class odd/even', inject(function($rootScope, $compile) {
-    var element = $compile('<ul><li ng:repeat="i in [0,1]" class="existing" ng:class-odd="\'odd\'" ng:class-even="\'even\'"></li><ul>')($rootScope);
-    $rootScope.$digest();
-    var e1 = jqLite(element[0].childNodes[1]);
-    var e2 = jqLite(element[0].childNodes[2]);
-    expect(e1.hasClass('existing')).toBeTruthy();
-    expect(e1.hasClass('odd')).toBeTruthy();
-    expect(e2.hasClass('existing')).toBeTruthy();
-    expect(e2.hasClass('even')).toBeTruthy();
-  }));
+    it('should ng:class odd/even', inject(function($rootScope, $compile) {
+      element = $compile('<ul><li ng:repeat="i in [0,1]" class="existing" ng:class-odd="\'odd\'" ng:class-even="\'even\'"></li><ul>')($rootScope);
+      $rootScope.$digest();
+      var e1 = jqLite(element[0].childNodes[1]);
+      var e2 = jqLite(element[0].childNodes[2]);
+      expect(e1.hasClass('existing')).toBeTruthy();
+      expect(e1.hasClass('odd')).toBeTruthy();
+      expect(e2.hasClass('existing')).toBeTruthy();
+      expect(e2.hasClass('even')).toBeTruthy();
+    }));
 
 
-  it('should allow both ng:class and ng:class-odd/even on the same element', inject(function($rootScope, $compile) {
-    var element = $compile('<ul>' +
-      '<li ng:repeat="i in [0,1]" ng:class="\'plainClass\'" ' +
-      'ng:class-odd="\'odd\'" ng:class-even="\'even\'"></li>' +
-      '<ul>')($rootScope);
-    $rootScope.$apply();
-    var e1 = jqLite(element[0].childNodes[1]);
-    var e2 = jqLite(element[0].childNodes[2]);
-
-    expect(e1.hasClass('plainClass')).toBeTruthy();
-    expect(e1.hasClass('odd')).toBeTruthy();
-    expect(e1.hasClass('even')).toBeFalsy();
-    expect(e2.hasClass('plainClass')).toBeTruthy();
-    expect(e2.hasClass('even')).toBeTruthy();
-    expect(e2.hasClass('odd')).toBeFalsy();
-  }));
+    it('should allow both ng:class and ng:class-odd/even on the same element', inject(function($rootScope, $compile) {
+      element = $compile('<ul>' +
+        '<li ng:repeat="i in [0,1]" ng:class="\'plainClass\'" ' +
+        'ng:class-odd="\'odd\'" ng:class-even="\'even\'"></li>' +
+        '<ul>')($rootScope);
+      $rootScope.$apply();
+      var e1 = jqLite(element[0].childNodes[1]);
+      var e2 = jqLite(element[0].childNodes[2]);
 
+      expect(e1.hasClass('plainClass')).toBeTruthy();
+      expect(e1.hasClass('odd')).toBeTruthy();
+      expect(e1.hasClass('even')).toBeFalsy();
+      expect(e2.hasClass('plainClass')).toBeTruthy();
+      expect(e2.hasClass('even')).toBeTruthy();
+      expect(e2.hasClass('odd')).toBeFalsy();
+    }));
 
-  it('should allow both ng:class and ng:class-odd/even with multiple classes', inject(function($rootScope, $compile) {
-    var element = $compile('<ul>' +
-      '<li ng:repeat="i in [0,1]" ng:class="[\'A\', \'B\']" ' +
-      'ng:class-odd="[\'C\', \'D\']" ng:class-even="[\'E\', \'F\']"></li>' +
-      '<ul>')($rootScope);
-    $rootScope.$apply();
-    var e1 = jqLite(element[0].childNodes[1]);
-    var e2 = jqLite(element[0].childNodes[2]);
-
-    expect(e1.hasClass('A')).toBeTruthy();
-    expect(e1.hasClass('B')).toBeTruthy();
-    expect(e1.hasClass('C')).toBeTruthy();
-    expect(e1.hasClass('D')).toBeTruthy();
-    expect(e1.hasClass('E')).toBeFalsy();
-    expect(e1.hasClass('F')).toBeFalsy();
-
-    expect(e2.hasClass('A')).toBeTruthy();
-    expect(e2.hasClass('B')).toBeTruthy();
-    expect(e2.hasClass('E')).toBeTruthy();
-    expect(e2.hasClass('F')).toBeTruthy();
-    expect(e2.hasClass('C')).toBeFalsy();
-    expect(e2.hasClass('D')).toBeFalsy();
-  }));
 
+    it('should allow both ng:class and ng:class-odd/even with multiple classes', inject(function($rootScope, $compile) {
+      element = $compile('<ul>' +
+        '<li ng:repeat="i in [0,1]" ng:class="[\'A\', \'B\']" ' +
+        'ng:class-odd="[\'C\', \'D\']" ng:class-even="[\'E\', \'F\']"></li>' +
+        '<ul>')($rootScope);
+      $rootScope.$apply();
+      var e1 = jqLite(element[0].childNodes[1]);
+      var e2 = jqLite(element[0].childNodes[2]);
+
+      expect(e1.hasClass('A')).toBeTruthy();
+      expect(e1.hasClass('B')).toBeTruthy();
+      expect(e1.hasClass('C')).toBeTruthy();
+      expect(e1.hasClass('D')).toBeTruthy();
+      expect(e1.hasClass('E')).toBeFalsy();
+      expect(e1.hasClass('F')).toBeFalsy();
+
+      expect(e2.hasClass('A')).toBeTruthy();
+      expect(e2.hasClass('B')).toBeTruthy();
+      expect(e2.hasClass('E')).toBeTruthy();
+      expect(e2.hasClass('F')).toBeTruthy();
+      expect(e2.hasClass('C')).toBeFalsy();
+      expect(e2.hasClass('D')).toBeFalsy();
+    }));
+  });
 
   describe('ng:style', function() {
 
     it('should set', inject(function($rootScope, $compile) {
-      var element = $compile('<div ng:style="{height: \'40px\'}"></div>')($rootScope);
+      element = $compile('<div ng:style="{height: \'40px\'}"></div>')($rootScope);
       $rootScope.$digest();
       expect(element.css('height')).toEqual('40px');
     }));
 
 
     it('should silently ignore undefined style', inject(function($rootScope, $compile) {
-      var element = $compile('<div ng:style="myStyle"></div>')($rootScope);
+      element = $compile('<div ng:style="myStyle"></div>')($rootScope);
       $rootScope.$digest();
       expect(element.hasClass('ng-exception')).toBeFalsy();
     }));
@@ -454,8 +441,8 @@ describe("directive", function() {
 
   describe('ng:show', function() {
     it('should show and hide an element', inject(function($rootScope, $compile) {
-      var element = jqLite('<div ng:show="exp"></div>');
-      var element = $compile(element)($rootScope);
+      element = jqLite('<div ng:show="exp"></div>');
+      element = $compile(element)($rootScope);
       $rootScope.$digest();
       expect(isCssVisible(element)).toEqual(false);
       $rootScope.exp = true;
@@ -465,8 +452,8 @@ describe("directive", function() {
 
 
     it('should make hidden element visible', inject(function($rootScope, $compile) {
-      var element = jqLite('<div style="display: none" ng:show="exp"></div>');
-      var element = $compile(element)($rootScope);
+      element = jqLite('<div style="display: none" ng:show="exp"></div>');
+      element = $compile(element)($rootScope);
       expect(isCssVisible(element)).toBe(false);
       $rootScope.exp = true;
       $rootScope.$digest();
@@ -476,8 +463,8 @@ describe("directive", function() {
 
   describe('ng:hide', function() {
     it('should hide an element', inject(function($rootScope, $compile) {
-      var element = jqLite('<div ng:hide="exp"></div>');
-      var element = $compile(element)($rootScope);
+      element = jqLite('<div ng:hide="exp"></div>');
+      element = $compile(element)($rootScope);
       expect(isCssVisible(element)).toBe(true);
       $rootScope.exp = true;
       $rootScope.$digest();
@@ -552,7 +539,7 @@ describe("directive", function() {
   describe('ng:cloak', function() {
 
     it('should get removed when an element is compiled', inject(function($rootScope, $compile) {
-      var element = jqLite('<div ng:cloak></div>');
+      element = jqLite('<div ng:cloak></div>');
       expect(element.attr('ng:cloak')).toBe('');
       $compile(element);
       expect(element.attr('ng:cloak')).toBeUndefined();
@@ -560,7 +547,7 @@ describe("directive", function() {
 
 
     it('should remove ng-cloak class from a compiled element', inject(function($rootScope, $compile) {
-      var element = jqLite('<div ng:cloak class="foo ng-cloak bar"></div>');
+      element = jqLite('<div ng:cloak class="foo ng-cloak bar"></div>');
 
       expect(element.hasClass('foo')).toBe(true);
       expect(element.hasClass('ng-cloak')).toBe(true);