refactor(directives): connect new compiler

- turn everything into a directive

Author: mhevery

css/angular.css

@@ -1,6 +1,7 @@
 @charset "UTF-8";
 
-[ng\:cloak], .ng-cloak {
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
+.ng-cloak, .x-ng-cloak {
   display: none;
 }
 

docs/content/api/angular.inputType.ngdoc

@@ -84,7 +84,7 @@ All `inputType` widgets support:
   it('should invalidate on wrong input', function() {
     expect(element('form[name=myForm]').prop('className')).toMatch('ng-valid');
     input('data').enter('{}');
-    expect(binding('data')).toEqual('data={\n  }');
+    expect(binding('data')).toEqual('{}');
     input('data').enter('{');
     expect(element('form[name=myForm]').prop('className')).toMatch('ng-invalid');
   });

docs/content/guide/dev_guide.expressions.ngdoc

@@ -185,16 +185,20 @@ Extensions: You can further extend the expression vocabulary by adding new metho
    {name:'Julie', phone:'555-8765'}]"></div>
  Search: <input ng:model="searchText"/>
  <table class="example3">
-   <tr><th>Name</th><th>Phone</th><tr>
-   <tr ng:repeat="friend in friends | filter:searchText">
-     <td>{{friend.name}}</td>
-     <td>{{friend.phone}}</td>
-   </tr>
+   <thead>
+     <tr><th>Name</th><th>Phone</th><tr>
+   </thead>
+   <tbody>
+     <tr ng:repeat="friend in friends | filter:searchText">
+       <td>{{friend.name}}</td>
+       <td>{{friend.phone}}</td>
+     </tr>
+    </tbody>
  </table>
 </doc:source>
 <doc:scenario>
  it('should filter the list', function() {
-    var tr = using('table.example3').repeater('tr.ng-attr-widget');
+    var tr = using('table.example3 tbody').repeater('tr');
     expect(tr.count()).toBe(5);
     input('searchText').enter('a');
     expect(tr.count()).toBe(2);

docs/content/guide/dev_guide.forms.ngdoc

@@ -277,20 +277,20 @@ The following example demonstrates:
 
 This example shows how to implement a custom HTML editor widget in Angular.
 
-    <doc:example>
+    <doc:example module="formModule">
       <doc:source>
         <script>
           function EditorCntl($scope) {
             $scope.htmlContent = '<b>Hello</b> <i>World</i>!';
           }
 
-          HTMLEditorWidget.$inject = ['$element', '$scope', 'htmlFilter'];
-          function HTMLEditorWidget(element, scope, htmlFilter) {
+          HTMLEditorWidget.$inject = ['$scope', '$element', '$sanitize'];
+          function HTMLEditorWidget(scope, element, $sanitize) {
             scope.$parseModel = function() {
               // need to protect for script injection
               try {
-                this.$viewValue = htmlFilter(
-                  this.$modelValue || '').get();
+                this.$viewValue = $sanitize(
+                  this.$modelValue || '');
                 if (this.$error.HTML) {
                   // we were invalid, but now we are OK.
                   this.$emit('$valid', 'HTML');
@@ -312,32 +312,33 @@ This example shows how to implement a custom HTML editor widget in Angular.
             });
           }
 
-          angular.directive('ng:html-editor-model', function() {
-            return ['$formFactory', '$element', function ($formFactory, element) {
-              var exp = element.attr('ng:html-editor-model'),
-                  form = $formFactory.forElement(element),
-                  widget;
-              element.attr('contentEditable', true);
-              widget = form.$createWidget({
-                scope: this,
-                model: exp,
-                controller: HTMLEditorWidget,
-                controllerArgs: {$element: element}});
-              // if the element is destroyed, then we need to
-              // notify the form.
-              element.bind('$destroy', function() {
-                widget.$destroy();
-              });
-            }];
-          });
+          angular.module.formModule = function($compileProvider){
+            $compileProvider.directive('ngHtmlEditorModel', function ($formFactory) {
+              return function(scope, element, attr) {
+                var form = $formFactory.forElement(element),
+                    widget;
+                element.attr('contentEditable', true);
+                widget = form.$createWidget({
+                  scope: scope,
+                  model: attr.ngHtmlEditorModel,
+                  controller: HTMLEditorWidget,
+                  controllerArgs: {$element: element}});
+                // if the element is destroyed, then we need to
+                // notify the form.
+                element.bind('$destroy', function() {
+                  widget.$destroy();
+                });
+              };
+            });
+          };
         </script>
         <form name='editorForm' ng:controller="EditorCntl">
           <div ng:html-editor-model="htmlContent"></div>
           <hr/>
           HTML: <br/>
           <textarea ng:model="htmlContent" cols="80"></textarea>
           <hr/>
-          <pre>editorForm = {{editorForm}}</pre>
+          <pre>editorForm = {{editorForm|json}}</pre>
         </form>
       </doc:source>
       <doc:scenario>