From 9ee2cdff44e7d496774b340de816344126c457b3 Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Tue, 22 Nov 2011 21:28:39 -0800 Subject: refactor(directives): connect new compiler - turn everything into a directive --- docs/content/api/angular.inputType.ngdoc | 2 +- docs/content/guide/dev_guide.expressions.ngdoc | 16 +- docs/content/guide/dev_guide.forms.ngdoc | 49 ++-- docs/src/templates/doc_widgets.js | 381 +++++++++++++------------ docs/src/templates/docs.js | 11 +- 5 files changed, 234 insertions(+), 225 deletions(-) (limited to 'docs') diff --git a/docs/content/api/angular.inputType.ngdoc b/docs/content/api/angular.inputType.ngdoc index bfd5fe6f..9cbf9eb2 100644 --- a/docs/content/api/angular.inputType.ngdoc +++ b/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'); }); diff --git a/docs/content/guide/dev_guide.expressions.ngdoc b/docs/content/guide/dev_guide.expressions.ngdoc index b7ecc521..61592897 100644 --- a/docs/content/guide/dev_guide.expressions.ngdoc +++ b/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'}]"> Search: - - - - - + + + + + + + + +
NamePhone
{{friend.name}}{{friend.phone}}
NamePhone
{{friend.name}}{{friend.phone}}
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); diff --git a/docs/content/guide/dev_guide.forms.ngdoc b/docs/content/guide/dev_guide.forms.ngdoc index 35f42036..c33596e6 100644 --- a/docs/content/guide/dev_guide.forms.ngdoc +++ b/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. - +
@@ -337,7 +338,7 @@ This example shows how to implement a custom HTML editor widget in Angular. HTML:
- 
editorForm = {{editorForm}}
+ 
editorForm = {{editorForm|json}}
 diff --git a/docs/src/templates/doc_widgets.js b/docs/src/templates/doc_widgets.js index db49088d..bee59234 100644 --- a/docs/src/templates/doc_widgets.js +++ b/docs/src/templates/doc_widgets.js @@ -1,4 +1,4 @@ -(function() { +angular.module('ngdocs.directives', [], function($compileProvider) { var angularJsUrl; var scripts = document.getElementsByTagName("script"); @@ -22,119 +22,122 @@ ' \n' + ''; - angular.widget('doc:example', ['$injector', '$browser', '$location', '$element', - function($injector, $browser, $location, element){ - this.descend(false); // do not compile the example code - var module = element.attr('module') || ''; - - //jQuery find() methods in this widget contain primitive selectors on purpose so that we can use - //jqlite instead. jqlite's find() method currently supports onlt getElementsByTagName! - var example = element.find('pre').eq(0), //doc-source - scriptSrc = '', - htmlSrc = example.text().replace(/]*>([\s\S]+)<\/script>/im, function(_, script) { - scriptSrc = script; - return ''; - }), - showSource = example.attr('source') !== 'false', - jsfiddle = example.attr('jsfiddle') || true, - scenario = element.find('pre').eq(1); //doc-scenario - - var tabs = angular.element('
    '); - - // show source tab, if not disabled - if (showSource) { - tabs.append( - '

  • Source

    • ' + - '
  • ' + - jsFiddleButton(jsfiddle) + // may or may not have value - '
    • ');
-    }
-    // show live preview tab
-    var livePreviewTab;
-    tabs.append('
  • Live Preview
    • ');
-    tabs.append(livePreviewTab = angular.element('
  • ' + htmlSrc +'
    • '));
-    // show scenario tab, if present
-    if (scenario.text()) {
-      tabs.append(
-        '
  • Scenario Test
    • ' +
-        '
  • ' + scenario.text() + '
    • ');
-    }
-
-    tabs.find('li').eq(1).find('pre').text(
-      HTML_TEMPLATE.
-        replace('_SCRIPT_SOURCE_', scriptSrc ? ' \n'  : '').
-        replace('_HTML_SOURCE_', indent(htmlSrc, '  ')).
-        replace('_MODULE_', module ? '="' + module + '"' : ''));
+  $compileProvider.directive('docExample', ['$injector', '$log', '$browser', '$location',
+                                    function($injector,   $log,   $browser,   $location) {
+    return {
+      terminal: true,
+      compile: function(element, attrs) {
+        var module = element.attr('module') || '';
+
+        //jQuery find() methods in this widget contain primitive selectors on purpose so that we can use
+        //jqlite instead. jqlite's find() method currently supports onlt getElementsByTagName!
+        var example = element.find('pre').eq(0),  //doc-source
+            scriptSrc = '',
+            htmlSrc = example.text().replace(/]*>([\s\S]+)<\/script>/im, function(_, script) {
+                scriptSrc = script;
+                return '';
+              }),
+            showSource = example.attr('source') !== 'false',
+            jsfiddle = example.attr('jsfiddle') || true,
+            scenario = element.find('pre').eq(1); //doc-scenario
+
+        var tabs = angular.element('
      ');
+
+        // show source tab, if not disabled
+        if (showSource) {
+          tabs.append(
+            '
    • Source
      • ' +
+            '
    • ' +
+            jsFiddleButton(jsfiddle) + // may or may not have value
+            '
      • ');
+        }
+        // show live preview tab
+        var livePreviewTab;
+        tabs.append('
    • Live Preview
      • ');
+        tabs.append(livePreviewTab = angular.element('
    • ' + htmlSrc +'
      • '));
+        // show scenario tab, if present
+        if (scenario.text()) {
+          tabs.append(
+            '
    • Scenario Test
      • ' +
+            '
    • ' + scenario.text() + '
      • ');
+        }
 
-    element.html('');
-    element.append(tabs);
+        tabs.find('li').eq(1).find('pre').text(
+          HTML_TEMPLATE.
+            replace('_SCRIPT_SOURCE_', scriptSrc ? ' \n'  : '').
+            replace('_HTML_SOURCE_', indent(htmlSrc, '  ')).
+            replace('_MODULE_', module ? '="' + module + '"' : ''));
 
-    try {
-      if (window.execScript) { // IE
-        window.execScript(scriptSrc || '"stupid IE!"'); // IE complains when evaling empty string
-      } else {
-        window.eval(scriptSrc);
-      }
-    } catch (e) {
-      alert(e);
-    }
+        element.html('');
+        element.append(tabs);
 
-    return function() {
-      var scope = this;
-      var modules = [
-        'ng',
-        function($provide) {
-          $provide.value('$browser', $browser);
-          $provide.value('$location', $location);
+        try {
+          if (window.execScript) { // IE
+            window.execScript(scriptSrc || '"stupid IE!"'); // IE complains when evaling empty string
+          } else {
+            window.eval(scriptSrc);
+          }
+        } catch (e) {
+          alert(e);
         }
-      ];
-      module && modules.push(module);
-
-      angular.bootstrap(livePreviewTab, modules).invoke(function($rootScope) {
-        element.bind('$destroy', scope.$root.$watch(function() {
-          $rootScope.$digest();
-        }));
-      });
-    };
 
-    function jsFiddleButton(jsfiddle) {
-      var fixJsFiddleIssue132 = true;
-      if (jsfiddle !== 'false') {
-        if(jsfiddle === true) {
-          //dynamically generate a fiddle
-          var fiddleUrl = 'http://jsfiddle.net/api/post/library/pure/';
-
-          function jsFiddleEscape(text, prefix) {
-            return indent(text.replace(/<\/textarea>/gi,'</textarea>'), prefix);
+        return function(docsAppScope) {
+          var modules = [
+            function($provide) {
+              $provide.value('$browser', $browser);
+              $provide.value('$location', $location);
+            }
+          ];
+          module && modules.push(module);
+
+          angular.bootstrap(livePreviewTab, modules).
+              invoke(['$rootScope', function(example$rootScope) {
+                element.bind('$destroy', docsAppScope.$root.$watch(function() {
+                  // this propagates the $watch from the docs app to the example app
+                  example$rootScope.$digest();
+                }));
+              }]);
+        };
+
+        function jsFiddleButton(jsfiddle) {
+          var fixJsFiddleIssue132 = true;
+          if (jsfiddle !== 'false') {
+            if(jsfiddle === true) {
+              //dynamically generate a fiddle
+              var fiddleUrl = 'http://jsfiddle.net/api/post/library/pure/';
+
+              function jsFiddleEscape(text, prefix) {
+                return indent(text.replace(/<\/textarea>/gi,'</textarea>'), prefix);
+              }
+
+              return '
      ' +
+                        (fixJsFiddleIssue132 ? '' : '') +
+                        '' +
+                        '' +
+                        '' +
+                        '' +
+                        '' +
+                      '
      ';
+            } else {
+              //use existing fiddle
+              fiddleUrl = "http://jsfiddle.net" + jsfiddle;
+              return '
      ' +
+                       '' +
+                     '
      ';
+            }
           }
-
-          return '
      ' +
-                    (fixJsFiddleIssue132 ? '' : '') +
-                    '' +
-                    '' +
-                    '' +
-                    '' +
-                    '' +
-                  '
      ';
-        } else {
-          //use existing fiddle
-          fiddleUrl = "http://jsfiddle.net" + jsfiddle;
-          return '
      ' +
-                   '' +
-                 '
      ';
-        }
+        };
       }
-      return '';
     }
   }]);
 
@@ -163,93 +166,95 @@
     return lines.join('\n');
   }
 
-  var HTML_TPL =
-      '
      Workspace Reset Instructions  ➤
      ' +
-      '
      ' +
-        '
      ' +
-          '
        ' +
-          '
      ' +
-        '
      ' +
-        '
      ' +
-
-        '
      ' +
+  $compileProvider.directive('docTutorialInstructions', function() {
+    var HTML_NAV = '
    • {title}
      • ';
+    var HTML_CONTENT = '
      {content}
      ';
+
+    var HTML_TPL =
+        '
      Workspace Reset Instructions  ➤
      ' +
+        '
      ' +
+          '
      ' +
+            '
        ' +
+            '
      ' +
+          '
      ' +
+          '
      ' +
+
+          '
      ' +
+        '
      ';
+
+    var DEFAULT_NAV =
+      '
    • Git on Mac/Linux
      • ' +
+      '
    • Git on Windows
      • ' +
+      '
    • Snapshots on Mac/Linux
      • ' +
+      '
    • Snapshots on Windows
      • ';
+
+    var DEFAULT_CONTENT =
+      '
      ' +
+        '
        ' +
+        '
      1. Reset the workspace to step {step}.
        ' +
+        '
         git checkout -f step-{step}
        2. ' +
+        '
      2. Refresh your browser or check the app out on angular\'s server.
        3. ' +
+        '
      ' +
+      '
      ' +
+
+      '
      ' +
+        '
        ' +
+        '
      1. Reset the workspace to step {step}.
        ' +
+        '
         git checkout -f step-{step}
        2. ' +
+        '
      2. Refresh your browser or check the app out on angular\'s server.
        3. ' +
+        '
      ' +
+      '
      ' +
+
+      '
      ' +
+        '
        ' +
+        '
      1. Reset the workspace to step {step}.
        ' +
+        '
         ./goto_step.sh {step}
        2. ' +
+        '
      2. Refresh your browser or check the app out on angular\'s server.
        3. ' +
+        '
      ' +
+      '
      ' +
+
+      '
      ' +
+        '
        ' +
+        '
      1. Reset the workspace to step {step}.
        ' +
+        '
         ./goto_step.bat {step}
        2. ' +
+        '
      2. Refresh your browser or check the app out on angular\'s server.
        3. ' +
+        '
      ' +
       '
      ';
 
-  var HTML_NAV = '
    • {title}
      • ';
-  var HTML_CONTENT = '
      {content}
      ';
-
-  var DEFAULT_NAV =
-    '
    • Git on Mac/Linux
      • ' +
-    '
    • Git on Windows
      • ' +
-    '
    • Snapshots on Mac/Linux
      • ' +
-    '
    • Snapshots on Windows
      • ';
-
-  var DEFAULT_CONTENT =
-    '
      ' +
-      '
        ' +
-      '
      1. Reset the workspace to step {step}.
        ' +
-      '
         git checkout -f step-{step}
        2. ' +
-      '
      2. Refresh your browser or check the app out on angular\'s server.
        3. ' +
-      '
      ' +
-    '
      ' +
-
-    '
      ' +
-      '
        ' +
-      '
      1. Reset the workspace to step {step}.
        ' +
-      '
         git checkout -f step-{step}
        2. ' +
-      '
      2. Refresh your browser or check the app out on angular\'s server.
        3. ' +
-      '
      ' +
-    '
      ' +
-
-    '
      ' +
-      '
        ' +
-      '
      1. Reset the workspace to step {step}.
        ' +
-      '
         ./goto_step.sh {step}
        2. ' +
-      '
      2. Refresh your browser or check the app out on angular\'s server.
        3. ' +
-      '
      ' +
-    '
      ' +
-
-    '
      ' +
-      '
        ' +
-      '
      1. Reset the workspace to step {step}.
        ' +
-      '
         ./goto_step.bat {step}
        2. ' +
-      '
      2. Refresh your browser or check the app out on angular\'s server.
        3. ' +
-      '
      ' +
-    '
      ';
-
-  angular.widget('doc:tutorial-instructions', function(element) {
-    this.descend(true);
-
-    var tabs = angular.element(HTML_TPL.replace('{show}', element.attr('show') || 'false')),
-        nav = tabs.find('ul'),
-        // use simple selectors because jqLite find() supports getElementsByTagName only
-        content = tabs.find('div').find('div'),
-        children = element.children();
-
-    if (children.length) {
-      // load custom content
-      angular.forEach(element.children(), function(elm) {
-        elm = angular.element(elm);
-        var id = elm.attr('id');
-
-        nav.append(HTML_NAV.replace('{title}', elm.attr('title')).replace(/\{id\}/g, id));
-        content.append(HTML_CONTENT.replace('{id}', id).replace('{content}', elm.html()));
-      });
-    } else {
-      // default
-      nav.append(DEFAULT_NAV);
-      content.append(DEFAULT_CONTENT.replace(/\{step\}/g, element.attr('step')));
-    }
+    return {
+      compile: function(element, attrs) {
+        var tabs = angular.element(HTML_TPL.replace('{show}', attrs.show || 'false')),
+            nav = tabs.find('ul'),
+            // use simple selectors because jqLite find() supports getElementsByTagName only
+            content = tabs.find('div').find('div'),
+            children = element.children();
+
+        if (children.length) {
+          // load custom content
+          angular.forEach(element.children(), function(elm) {
+            elm = angular.element(elm);
+            var id = elm.attr('id');
+
+            nav.append(HTML_NAV.replace('{title}', elm.attr('title')).replace(/\{id\}/g, id));
+            content.append(HTML_CONTENT.replace('{id}', id).replace('{content}', elm.html()));
+          });
+        } else {
+          // default
+          nav.append(DEFAULT_NAV);
+          content.append(DEFAULT_CONTENT.replace(/\{step\}/g, element.attr('step')));
+        }
 
-    element.html('');
-    element.append(tabs);
+        element.html('');
+        element.append(tabs);
+      }
+    }
   });
 
 
-  angular.directive('doc:tutorial-nav', function(step) {
-    return function(element) {
+  $compileProvider.directive('docTutorialNav', function() {
+    return function(scope, element, attrs) {
       var prevStep, codeDiff, nextStep,
-          content;
+          content, step = attrs.docTutorialNav;
 
       step = parseInt(step, 10);
 
@@ -282,4 +287,4 @@
       return (step < 10) ? ('0' + step) : step;
     }
   });
-})();
+});
diff --git a/docs/src/templates/docs.js b/docs/src/templates/docs.js
index 7fb9cb22..b9fc0407 100644
--- a/docs/src/templates/docs.js
+++ b/docs/src/templates/docs.js
@@ -125,11 +125,6 @@ function DocsController(scope, $location, $window, $cookies, $filter) {
   }
 }
 
-// prevent compilation of code
-angular.widget('code', function(element) {
-  element.attr('ng:non-bindable', 'true');
-});
-
 SyntaxHighlighter['defaults'].toolbar = false;
 SyntaxHighlighter['defaults'].gutter = true;
 
@@ -151,7 +146,7 @@ function TutorialInstructionsCtrl($cookieStore) {
   };
 }
 
-angular.module('ngdocs', [], function($locationProvider, $filterProvider) {
+angular.module('ngdocs', ['ngdocs.directives'], function($locationProvider, $filterProvider, $compileProvider) {
   $locationProvider.html5Mode(true).hashPrefix('!');
 
   $filterProvider.register('title', function(){
@@ -161,4 +156,8 @@ angular.module('ngdocs', [], function($locationProvider, $filterProvider) {
       });
     };
   });
+
+  $compileProvider.directive('code', function() {
+    return { terminal: true };
+  });
 });
-- 
cgit v1.2.3