From 4804c83b7db5770d5d02eea9eea4cc012b4aa524 Mon Sep 17 00:00:00 2001
From: Misko Hevery
Date: Wed, 14 Dec 2011 02:55:31 +0100
Subject: docs(compiler): update the compiler docs
---
src/directives.js | 198 ++++++++++++++++++++++++++++++---------------
src/jqLite.js | 11 +--
src/loader.js | 14 +++-
src/markups.js | 14 ++--
src/scenario/SpecRunner.js | 4 +
src/service/compiler.js | 6 +-
src/service/formFactory.js | 17 ++--
src/service/http.js | 10 +--
src/service/route.js | 6 +-
src/service/sanitize.js | 4 +-
src/service/scope.js | 7 +-
src/widget/form.js | 2 +-
src/widget/input.js | 6 +-
src/widget/select.js | 8 +-
src/widgets.js | 41 ++--------
15 files changed, 200 insertions(+), 148 deletions(-)
(limited to 'src')
diff --git a/src/directives.js b/src/directives.js
index dc0a986f..70b09c88 100644
--- a/src/directives.js
+++ b/src/directives.js
@@ -1,40 +1,8 @@
'use strict';
-/**
- * @ngdoc function
- * @name angular.directive
- * @description
- *
- * Angular directives create custom attributes for DOM elements. A directive can modify the
- * behavior of the element in which it is specified. Do not use directives to add elements to the
- * DOM; instead, use {@link angular.widget widgets} to add DOM elements.
- *
- * For more information about how Angular directives work, and to learn how to create your own
- * directives, see {@link guide/dev_guide.compiler.directives Understanding Angular Directives} in
- * the Angular Developer Guide.
- *
- * @param {string} name Directive identifier (case insensitive).
- * @param {function(string, Element)} compileFn Also called "template function" is a function called
- * during compilation of the template when the compiler comes across the directive being
- * registered. The string value of the element attribute representing the directive and
- * jQuery/jqLite wrapped DOM element are passed as arguments to this function.
- *
- * The `compileFn` function may return a linking function also called an instance function.
- * This function is called during the linking phase when a Scope is being associated with the
- * template or template clone (see repeater notes below). The signature of the linking function
- * is: `function(Element)` where Element is jQuery/jqLite wrapped DOM Element that is being
- * linked.
- *
- * The biggest differenciator between the compile and linking functions is how they are being called
- * when a directive is present within an {@link angular.widget.@ng:repeat ng:repeat}. In this case,
- * the compile function gets called once per occurence of the directive in the template. On the
- * other hand the linking function gets called once for each repeated clone of the template (times
- * number of occurences of the directive in the repeated template).
- */
-
/**
* @ngdoc directive
- * @name angular.directive.ng:init
+ * @name angular.module.ng.$compileProvider.directive.ng:init
*
* @description
* The `ng:init` attribute specifies initialization tasks to be executed
@@ -70,7 +38,7 @@ var ngInitDirective = valueFn({
/**
* @ngdoc directive
- * @name angular.directive.ng:controller
+ * @name angular.module.ng.$compileProvider.directive.ng:controller
*
* @description
* The `ng:controller` directive assigns behavior to a scope. This is a key aspect of how angular
@@ -183,7 +151,7 @@ var ngControllerDirective = ['$controller', '$window', function($controller, $wi
/**
* @ngdoc directive
- * @name angular.directive.ng:bind
+ * @name angular.module.ng.$compileProvider.directive.ng:bind
*
* @description
* The `ng:bind` attribute tells Angular to replace the text content of the specified HTML element
@@ -248,7 +216,7 @@ var ngBindHtmlDirective = ['$sanitize', function($sanitize) {
/**
* @ngdoc directive
- * @name angular.directive.ng:bind-template
+ * @name angular.module.ng.$compileProvider.directive.ng:bind-template
*
* @description
* The `ng:bind-template` attribute specifies that the element
@@ -305,7 +273,7 @@ var ngBindTemplateDirective = ['$interpolate', function($interpolate) {
/**
* @ngdoc directive
- * @name angular.directive.ng:bind-attr
+ * @name angular.module.ng.$compileProvider.directive.ng:bind-attr
*
* @description
* The `ng:bind-attr` attribute specifies that a
@@ -333,7 +301,7 @@ var ngBindTemplateDirective = ['$interpolate', function($interpolate) {
* During compilation, the template with attribute markup gets translated to the ng:bind-attr form
* mentioned above.
*
- * _Note_: You might want to consider using {@link angular.directive.ng:href ng:href} instead of
+ * _Note_: You might want to consider using {@link angular.module.ng.$compileProvider.directive.ng:href ng:href} instead of
* `href` if the binding is present in the main application template (`index.html`) and you want to
* make sure that a user is not capable of clicking on raw/uncompiled link.
*
@@ -399,7 +367,7 @@ var ngBindAttrDirective = ['$interpolate', function($interpolate) {
/**
* @ngdoc directive
- * @name angular.directive.ng:click
+ * @name angular.module.ng.$compileProvider.directive.ng:click
*
* @description
* The ng:click allows you to specify custom behavior when
@@ -435,33 +403,133 @@ var ngBindAttrDirective = ['$interpolate', function($interpolate) {
* TODO: maybe we should consider allowing users to control event propagation in the future.
*/
var ngEventDirectives = {};
-forEach('click dblclick mousedown mouseup mouseover mousemove'.split(' '), function(name) {
- var directiveName = camelCase('ng-' + name);
- ngEventDirectives[directiveName] = valueFn(function(scope, element, attr) {
- element.bind(lowercase(name), function(event) {
- scope.$apply(attr[directiveName]);
- event.stopPropagation();
+forEach(
+ 'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave'.split(' '),
+ function(name) {
+ var directiveName = directiveNormalize('ng-' + name);
+ ngEventDirectives[directiveName] = valueFn(function(scope, element, attr) {
+ element.bind(lowercase(name), function(event) {
+ scope.$apply(attr[directiveName]);
+ event.stopPropagation();
+ });
});
- });
-});
+ }
+);
+
+/**
+ * @ngdoc directive
+ * @name angular.module.ng.$compileProvider.directive.ng:dblclick
+ *
+ * @description
+ * The ng:dblclick allows you to specify custom behavior on dblclick event.
+ *
+ * @element ANY
+ * @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate upon
+ * dblclick.
+ *
+ * @example
+ * See {@link angular.module.ng.$compileProvider.directive.ng:click ng:click}
+ */
+
+
+/**
+ * @ngdoc directive
+ * @name angular.module.ng.$compileProvider.directive.ng:mousedown
+ *
+ * @description
+ * The ng:mousedown allows you to specify custom behavior on mousedown event.
+ *
+ * @element ANY
+ * @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate upon
+ * mousedown.
+ *
+ * @example
+ * See {@link angular.module.ng.$compileProvider.directive.ng:click ng:click}
+ */
+
+
+/**
+ * @ngdoc directive
+ * @name angular.module.ng.$compileProvider.directive.ng:mouseup
+ *
+ * @description
+ * Specify custom behavior on mouseup event.
+ *
+ * @element ANY
+ * @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate upon
+ * mouseup.
+ *
+ * @example
+ * See {@link angular.module.ng.$compileProvider.directive.ng:click ng:click}
+ */
+
+/**
+ * @ngdoc directive
+ * @name angular.module.ng.$compileProvider.directive.ng:mouseover
+ *
+ * @description
+ * Specify custom behavior on mouseover event.
+ *
+ * @element ANY
+ * @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate upon
+ * mouseover.
+ *
+ * @example
+ * See {@link angular.module.ng.$compileProvider.directive.ng:click ng:click}
+ */
/**
* @ngdoc directive
- * @name angular.directive.ng:dblclick
+ * @name angular.module.ng.$compileProvider.directive.ng:mouseenter
*
* @description
- * The ng:dblclick allows you to specify custom behavior when
- * element is double-clicked.
+ * Specify custom behavior on mouseenter event.
*
* @element ANY
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate upon
- * double-click.
+ * mouseenter.
+ *
+ * @example
+ * See {@link angular.module.ng.$compileProvider.directive.ng:click ng:click}
*/
+
+/**
+ * @ngdoc directive
+ * @name angular.module.ng.$compileProvider.directive.ng:mouseleave
+ *
+ * @description
+ * Specify custom behavior on mouseleave event.
+ *
+ * @element ANY
+ * @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate upon
+ * mouseleave.
+ *
+ * @example
+ * See {@link angular.module.ng.$compileProvider.directive.ng:click ng:click}
+ */
+
+
+/**
+ * @ngdoc directive
+ * @name angular.module.ng.$compileProvider.directive.ng:mousemove
+ *
+ * @description
+ * Specify custom behavior on mousemove event.
+ *
+ * @element ANY
+ * @param {expression} expression {@link guide/dev_guide.expressions Expression} to evaluate upon
+ * mousemove.
+ *
+ * @example
+ * See {@link angular.module.ng.$compileProvider.directive.ng:click ng:click}
+ */
+
+
/**
* @ngdoc directive
- * @name angular.directive.ng:submit
+ * @name angular.module.ng.$compileProvider.directive.ng:submit
*
* @description
* Enables binding angular expressions to onsubmit events.
@@ -536,7 +604,7 @@ function classDirective(name, selector) {
/**
* @ngdoc directive
- * @name angular.directive.ng:class
+ * @name angular.module.ng.$compileProvider.directive.ng:class
*
* @description
* The `ng:class` allows you to set CSS class on HTML element dynamically by databinding an
@@ -582,15 +650,15 @@ var ngClassDirective = classDirective('', true);
/**
* @ngdoc directive
- * @name angular.directive.ng:class-odd
+ * @name angular.module.ng.$compileProvider.directive.ng:class-odd
*
* @description
* The `ng:class-odd` and `ng:class-even` works exactly as
- * {@link angular.directive.ng:class ng:class}, except it works in conjunction with `ng:repeat` and
+ * {@link angular.module.ng.$compileProvider.directive.ng:class ng:class}, except it works in conjunction with `ng:repeat` and
* takes affect only on odd (even) rows.
*
* This directive can be applied only within a scope of an
- * {@link angular.widget.@ng:repeat ng:repeat}.
+ * {@link angular.module.ng.$compileProvider.directive.ng:repeat ng:repeat}.
*
* @element ANY
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to eval. The result
@@ -622,15 +690,15 @@ var ngClassOddDirective = classDirective('Odd', 0);
/**
* @ngdoc directive
- * @name angular.directive.ng:class-even
+ * @name angular.module.ng.$compileProvider.directive.ng:class-even
*
* @description
* The `ng:class-odd` and `ng:class-even` works exactly as
- * {@link angular.directive.ng:class ng:class}, except it works in conjunction with `ng:repeat` and
+ * {@link angular.module.ng.$compileProvider.directive.ng:class ng:class}, except it works in conjunction with `ng:repeat` and
* takes affect only on odd (even) rows.
*
* This directive can be applied only within a scope of an
- * {@link angular.widget.@ng:repeat ng:repeat}.
+ * {@link angular.module.ng.$compileProvider.directive.ng:repeat ng:repeat}.
*
* @element ANY
* @param {expression} expression {@link guide/dev_guide.expressions Expression} to eval. The result
@@ -661,7 +729,7 @@ var ngClassEvenDirective = classDirective('Even', 1);
/**
* @ngdoc directive
- * @name angular.directive.ng:show
+ * @name angular.module.ng.$compileProvider.directive.ng:show
*
* @description
* The `ng:show` and `ng:hide` directives show or hide a portion of the DOM tree (HTML)
@@ -700,7 +768,7 @@ var ngShowDirective = valueFn(function(scope, element, attr){
/**
* @ngdoc directive
- * @name angular.directive.ng:hide
+ * @name angular.module.ng.$compileProvider.directive.ng:hide
*
* @description
* The `ng:hide` and `ng:show` directives hide or show a portion
@@ -739,7 +807,7 @@ var ngHideDirective = valueFn(function(scope, element, attr){
/**
* @ngdoc directive
- * @name angular.directive.ng:style
+ * @name angular.module.ng.$compileProvider.directive.ng:style
*
* @description
* The ng:style allows you to set CSS style on an HTML element conditionally.
@@ -781,7 +849,7 @@ var ngStyleDirective = valueFn(function(scope, element, attr) {
/**
* @ngdoc directive
- * @name angular.directive.ng:cloak
+ * @name angular.module.ng.$compileProvider.directive.ng:cloak
*
* @description
* The `ng:cloak` directive is used to prevent the Angular html template from being briefly
@@ -840,9 +908,9 @@ var ngCloakDirective = valueFn({
});
function ngAttributeAliasDirective(propName, attrName) {
- ngAttributeAliasDirectives[camelCase('ng-' + attrName)] = ['$interpolate', function($interpolate) {
+ ngAttributeAliasDirectives[directiveNormalize('ng-' + attrName)] = ['$interpolate', function($interpolate) {
return function(scope, element, attr) {
- scope.$watch($interpolate(attr[camelCase('ng-' + attrName)]), function(value) {
+ scope.$watch($interpolate(attr[directiveNormalize('ng-' + attrName)]), function(value) {
attr.$set(attrName, value);
});
}
diff --git a/src/jqLite.js b/src/jqLite.js
index 2505a307..12ef39c3 100644
--- a/src/jqLite.js
+++ b/src/jqLite.js
@@ -101,22 +101,15 @@ function getStyle(element) {
var SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
-var PREFIX_REGEXP = /^(x[\:\-_]|data[\:\-_])/i;
var MOZ_HACK_REGEXP = /^moz([A-Z])/;
+
/**
- * Converts all accepted directives format into proper directive name.
- * All of these will become 'myDirective':
- * my:DiRective
- * my-directive
- * x-my-directive
- * data-my:directive
- *
+ * Converts snake_case to camelCase.
* Also there is special case for Moz prefix starting with upper case letter.
* @param name Name to normalize
*/
function camelCase(name) {
return name.
- replace(PREFIX_REGEXP, '').
replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
return offset ? letter.toUpperCase() : letter;
}).
diff --git a/src/loader.js b/src/loader.js
index 3abbfd0e..d703e566 100644
--- a/src/loader.js
+++ b/src/loader.js
@@ -143,13 +143,25 @@ function setupModuleLoader(window) {
* @ngdoc method
* @name angular.Module#filter
* @methodOf angular.Module
- * @param {string} name filterr name
+ * @param {string} name filter name
* @param {Function} filterFactory Factory function for creating new instance of filter.
* @description
* See {@link angular.module.ng.$filterProvider#register $filterProvider.register()}.
*/
filter: invokeLater('$filterProvider', 'register'),
+ /**
+ * @ngdoc method
+ * @name angular.Module#directive
+ * @methodOf angular.Module
+ * @param {string} name directive name
+ * @param {Function} directiveFactory Factory function for creating new instance of
+ * directives.
+ * @description
+ * See {@link angular.module.ng.$compileProvider#directive $compileProvider.directive()}.
+ */
+ directive: invokeLater('$compileProvider', 'directive'),
+
/**
* @ngdoc method
* @name angular.Module#config
diff --git a/src/markups.js b/src/markups.js
index 9e3e16f0..36b03131 100644
--- a/src/markups.js
+++ b/src/markups.js
@@ -3,7 +3,7 @@
/**
* @ngdoc directive
- * @name angular.directive.ng:href
+ * @name angular.module.ng.$compileProvider.directive.ng:href
*
* @description
* Using markup like {{hash}} in an href attribute makes
@@ -83,7 +83,7 @@
/**
* @ngdoc directive
- * @name angular.directive.ng:src
+ * @name angular.module.ng.$compileProvider.directive.ng:src
*
* @description
* Using markup like `{{hash}}` in a `src` attribute doesn't
@@ -108,7 +108,7 @@
/**
* @ngdoc directive
- * @name angular.directive.ng:disabled
+ * @name angular.module.ng.$compileProvider.directive.ng:disabled
*
* @description
*
@@ -146,7 +146,7 @@
/**
* @ngdoc directive
- * @name angular.directive.ng:checked
+ * @name angular.module.ng.$compileProvider.directive.ng:checked
*
* @description
* The HTML specs do not require browsers to preserve the special attributes such as checked.
@@ -175,7 +175,7 @@
/**
* @ngdoc directive
- * @name angular.directive.ng:multiple
+ * @name angular.module.ng.$compileProvider.directive.ng:multiple
*
* @description
* The HTML specs do not require browsers to preserve the special attributes such as multiple.
@@ -210,7 +210,7 @@
/**
* @ngdoc directive
- * @name angular.directive.ng:readonly
+ * @name angular.module.ng.$compileProvider.directive.ng:readonly
*
* @description
* The HTML specs do not require browsers to preserve the special attributes such as readonly.
@@ -239,7 +239,7 @@
/**
* @ngdoc directive
-* @name angular.directive.ng:selected
+* @name angular.module.ng.$compileProvider.directive.ng:selected
*
* @description
* The HTML specs do not require browsers to preserve the special attributes such as selected.
diff --git a/src/scenario/SpecRunner.js b/src/scenario/SpecRunner.js
index eacf13a8..f4b9b0a7 100644
--- a/src/scenario/SpecRunner.js
+++ b/src/scenario/SpecRunner.js
@@ -105,6 +105,7 @@ angular.scenario.SpecRunner.prototype.addFuture = function(name, behavior, line)
*/
angular.scenario.SpecRunner.prototype.addFutureAction = function(name, behavior, line) {
var self = this;
+ var NG = /\[ng\\\:/;
return this.addFuture(name, function(done) {
this.application.executeAction(function($window, $document) {
@@ -117,6 +118,9 @@ angular.scenario.SpecRunner.prototype.addFutureAction = function(name, behavior,
selector = selector.replace('$' + (index + 1), value);
});
var result = $document.find(selector);
+ if (selector.match(NG)) {
+ result = result.add(selector.replace(NG, '[ng-'), $document);
+ }
if (!result.length) {
throw {
type: 'selector',
diff --git a/src/service/compiler.js b/src/service/compiler.js
index c663baac..acfc7851 100644
--- a/src/service/compiler.js
+++ b/src/service/compiler.js
@@ -49,9 +49,9 @@
})
});
- function Ctrl() {
- this.name = 'Angular';
- this.html = 'Hello {{name}}';
+ function Ctrl($scope) {
+ $scope.name = 'Angular';
+ $scope.html = 'Hello {{name}}';
}
diff --git a/src/service/formFactory.js b/src/service/formFactory.js
index 727a243c..807f4113 100644
--- a/src/service/formFactory.js
+++ b/src/service/formFactory.js
@@ -22,26 +22,27 @@
* This example shows how one could write a widget which would enable data-binding on
* `contenteditable` feature of HTML.
*
-
+