From 2430f52bb97fa9d682e5f028c977c5bf94c5ec38 Mon Sep 17 00:00:00 2001 From: Misko Hevery Date: Fri, 23 Mar 2012 14:03:24 -0700 Subject: chore(module): move files around in preparation for more modules --- src/directive/a.js | 29 - src/directive/booleanAttrDirs.js | 314 ---------- src/directive/directives.js | 11 - src/directive/form.js | 267 --------- src/directive/input.js | 1194 -------------------------------------- src/directive/ngBind.js | 155 ----- src/directive/ngClass.js | 143 ----- src/directive/ngCloak.js | 61 -- src/directive/ngController.js | 103 ---- src/directive/ngEventDirs.js | 222 ------- src/directive/ngInclude.js | 131 ----- src/directive/ngInit.js | 37 -- src/directive/ngNonBindable.js | 33 -- src/directive/ngPluralize.js | 204 ------- src/directive/ngRepeat.js | 181 ------ src/directive/ngShowHide.js | 80 --- src/directive/ngStyle.js | 42 -- src/directive/ngSwitch.js | 112 ---- src/directive/ngTransclude.js | 58 -- src/directive/ngView.js | 170 ------ src/directive/script.js | 43 -- src/directive/select.js | 449 -------------- src/directive/style.js | 6 - 23 files changed, 4045 deletions(-) delete mode 100644 src/directive/a.js delete mode 100644 src/directive/booleanAttrDirs.js delete mode 100644 src/directive/directives.js delete mode 100644 src/directive/form.js delete mode 100644 src/directive/input.js delete mode 100644 src/directive/ngBind.js delete mode 100644 src/directive/ngClass.js delete mode 100644 src/directive/ngCloak.js delete mode 100644 src/directive/ngController.js delete mode 100644 src/directive/ngEventDirs.js delete mode 100644 src/directive/ngInclude.js delete mode 100644 src/directive/ngInit.js delete mode 100644 src/directive/ngNonBindable.js delete mode 100644 src/directive/ngPluralize.js delete mode 100644 src/directive/ngRepeat.js delete mode 100644 src/directive/ngShowHide.js delete mode 100644 src/directive/ngStyle.js delete mode 100644 src/directive/ngSwitch.js delete mode 100644 src/directive/ngTransclude.js delete mode 100644 src/directive/ngView.js delete mode 100644 src/directive/script.js delete mode 100644 src/directive/select.js delete mode 100644 src/directive/style.js (limited to 'src/directive') diff --git a/src/directive/a.js b/src/directive/a.js deleted file mode 100644 index d96af784..00000000 --- a/src/directive/a.js +++ /dev/null @@ -1,29 +0,0 @@ -'use strict'; - -/* - * Modifies the default behavior of html A tag, so that the default action is prevented when href - * attribute is empty. - * - * The reasoning for this change is to allow easy creation of action links with ng-click without - * changing the location or causing page reloads, e.g.: - * Save - */ -var htmlAnchorDirective = valueFn({ - restrict: 'E', - compile: function(element, attr) { - // turn link into a link in IE - // but only if it doesn't have name attribute, in which case it's an anchor - if (!attr.href) { - attr.$set('href', ''); - } - - return function(scope, element) { - element.bind('click', function(event){ - // if we have no href url, then don't navigate anywhere. - if (!element.attr('href')) { - event.preventDefault(); - } - }); - } - } -}); diff --git a/src/directive/booleanAttrDirs.js b/src/directive/booleanAttrDirs.js deleted file mode 100644 index 7da52db0..00000000 --- a/src/directive/booleanAttrDirs.js +++ /dev/null @@ -1,314 +0,0 @@ -'use strict'; - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-href - * @restrict A - * - * @description - * Using markup like {{hash}} in an href attribute makes - * the page open to a wrong URL, if the user clicks that link before - * angular has a chance to replace the {{hash}} with actual URL, the - * link will be broken and will most likely return a 404 error. - * The `ng-href` solves this problem by placing the `href` in the - * `ng-` namespace. - * - * The buggy way to write it: - *

- * 
- *

- * - * The correct way to write it: - *

- * 
- *

- * - * @element A - * @param {template} ng-href any string which can contain `{{}}` markup. - * - * @example - * This example uses `link` variable inside `href` attribute: - - -
- link 1 (link, don't reload)
- link 2 (link, don't reload)
- link 3 (link, reload!)
- anchor (link, don't reload)
- anchor (no link)
- link (link, change hash) - - - it('should execute ng-click but not reload when href without value', function() { - element('#link-1').click(); - expect(input('value').val()).toEqual('1'); - expect(element('#link-1').attr('href')).toBe(""); - }); - - it('should execute ng-click but not reload when href empty string', function() { - element('#link-2').click(); - expect(input('value').val()).toEqual('2'); - expect(element('#link-2').attr('href')).toBe(""); - }); - - it('should execute ng-click and change url when ng-href specified', function() { - expect(element('#link-3').attr('href')).toBe("/123"); - - element('#link-3').click(); - expect(browser().window().path()).toEqual('/123'); - }); - - it('should execute ng-click but not reload when href empty string and name specified', function() { - element('#link-4').click(); - expect(input('value').val()).toEqual('4'); - expect(element('#link-4').attr('href')).toBe(""); - }); - - it('should execute ng-click but not reload when no href but name specified', function() { - element('#link-5').click(); - expect(input('value').val()).toEqual('5'); - expect(element('#link-5').attr('href')).toBe(""); - }); - - it('should only change url when only ng-href', function() { - input('value').enter('6'); - expect(element('#link-6').attr('href')).toBe("/6"); - - element('#link-6').click(); - expect(browser().window().path()).toEqual('/6'); - }); - - - */ - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-src - * @restrict A - * - * @description - * Using markup like `{{hash}}` in a `src` attribute doesn't - * work right: The browser will fetch from the URL with the literal - * text `{{hash}}` until replaces the expression inside - * `{{hash}}`. The `ng-src` attribute solves this problem by placing - * the `src` attribute in the `ng-` namespace. - * - * The buggy way to write it: - *

- * 
- *

- * - * The correct way to write it: - *

- * 
- *

- * - * @element IMG - * @param {template} ng-src any string which can contain `{{}}` markup. - */ - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-disabled - * @restrict A - * - * @description - * - * The following markup will make the button enabled on Chrome/Firefox but not on IE8 and older IEs: - *

- * 
- *  
- * 
- *

- * - * The HTML specs do not require browsers to preserve the special attributes such as disabled. - * (The presence of them means true and absence means false) - * This prevents the angular compiler from correctly retrieving the binding expression. - * To solve this problem, we introduce ng-disabled. - * - * @example - - - Click me to toggle:
- - - - it('should toggle button', function() { - expect(element('.doc-example-live :button').prop('disabled')).toBeFalsy(); - input('checked').check(); - expect(element('.doc-example-live :button').prop('disabled')).toBeTruthy(); - }); - - - * - * @element INPUT - * @param {string} expression Angular expression that will be evaluated. - */ - - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-checked - * @restrict A - * - * @description - * The HTML specs do not require browsers to preserve the special attributes such as checked. - * (The presence of them means true and absence means false) - * This prevents the angular compiler from correctly retrieving the binding expression. - * To solve this problem, we introduce ng-checked. - * @example - - - Check me to check both:
- - - - it('should check both checkBoxes', function() { - expect(element('.doc-example-live #checkSlave').prop('checked')).toBeFalsy(); - input('master').check(); - expect(element('.doc-example-live #checkSlave').prop('checked')).toBeTruthy(); - }); - - - * - * @element INPUT - * @param {string} expression Angular expression that will be evaluated. - */ - - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-multiple - * @restrict A - * - * @description - * The HTML specs do not require browsers to preserve the special attributes such as multiple. - * (The presence of them means true and absence means false) - * This prevents the angular compiler from correctly retrieving the binding expression. - * To solve this problem, we introduce ng-multiple. - * - * @example - - - Check me check multiple:
- - - - it('should toggle multiple', function() { - expect(element('.doc-example-live #select').prop('multiple')).toBeFalsy(); - input('checked').check(); - expect(element('.doc-example-live #select').prop('multiple')).toBeTruthy(); - }); - - - * - * @element SELECT - * @param {string} expression Angular expression that will be evaluated. - */ - - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-readonly - * @restrict A - * - * @description - * The HTML specs do not require browsers to preserve the special attributes such as readonly. - * (The presence of them means true and absence means false) - * This prevents the angular compiler from correctly retrieving the binding expression. - * To solve this problem, we introduce ng-readonly. - * @example - - - Check me to make text readonly:
- - - - it('should toggle readonly attr', function() { - expect(element('.doc-example-live :text').prop('readonly')).toBeFalsy(); - input('checked').check(); - expect(element('.doc-example-live :text').prop('readonly')).toBeTruthy(); - }); - - - * - * @element INPUT - * @param {string} expression Angular expression that will be evaluated. - */ - - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-selected - * @restrict A - * - * @description - * The HTML specs do not require browsers to preserve the special attributes such as selected. - * (The presence of them means true and absence means false) - * This prevents the angular compiler from correctly retrieving the binding expression. - * To solve this problem, we introduce ng-selected. - * @example - - - Check me to select:
- - - - it('should select Greetings!', function() { - expect(element('.doc-example-live #greet').prop('selected')).toBeFalsy(); - input('selected').check(); - expect(element('.doc-example-live #greet').prop('selected')).toBeTruthy(); - }); - - - * - * @element OPTION - * @param {string} expression Angular expression that will be evaluated. - */ - - -var ngAttributeAliasDirectives = {}; - - -// boolean attrs are evaluated -forEach(BOOLEAN_ATTR, function(propName, attrName) { - var normalized = directiveNormalize('ng-' + attrName); - ngAttributeAliasDirectives[normalized] = function() { - return { - compile: function(tpl, attr) { - attr.$observers[attrName] = []; - return function(scope, element, attr) { - scope.$watch(attr[normalized], function(value) { - attr.$set(attrName, value); - }); - }; - } - }; - }; -}); - - -// ng-src, ng-href are interpolated -forEach(['src', 'href'], function(attrName) { - var normalized = directiveNormalize('ng-' + attrName); - ngAttributeAliasDirectives[normalized] = function() { - return { - compile: function(tpl, attr) { - attr.$observers[attrName] = []; - return function(scope, element, attr) { - attr.$observe(normalized, function(value) { - attr.$set(attrName, value); - }); - }; - } - }; - }; -}); diff --git a/src/directive/directives.js b/src/directive/directives.js deleted file mode 100644 index 123645f9..00000000 --- a/src/directive/directives.js +++ /dev/null @@ -1,11 +0,0 @@ -'use strict'; - -function ngDirective(directive) { - if (isFunction(directive)) { - directive = { - link: directive - } - } - directive.restrict = directive.restrict || 'AC'; - return valueFn(directive); -}; diff --git a/src/directive/form.js b/src/directive/form.js deleted file mode 100644 index b6d3f4be..00000000 --- a/src/directive/form.js +++ /dev/null @@ -1,267 +0,0 @@ -'use strict'; - - -var nullFormCtrl = { - $addControl: noop, - $removeControl: noop, - $setValidity: noop, - $setDirty: noop -} - -/** - * @ngdoc object - * @name angular.module.ng.$compileProvider.directive.form.FormController - * - * @property {boolean} $pristine True if user has not interacted with the form yet. - * @property {boolean} $dirty True if user has already interacted with the form. - * @property {boolean} $valid True if all of the containg forms and controls are valid. - * @property {boolean} $invalid True if at least one containing control or form is invalid. - * - * @property {Object} $error Is an object hash, containing references to all invalid controls or - * forms, where: - * - * - keys are validation tokens (error names) — such as `REQUIRED`, `URL` or `EMAIL`), - * - values are arrays of controls or forms that are invalid with given error. - * - * @description - * `FormController` keeps track of all its controls and nested forms as well as state of them, - * such as being valid/invalid or dirty/pristine. - * - * Each {@link angular.module.ng.$compileProvider.directive.form form} directive creates an instance - * of `FormController`. - * - */ -FormController.$inject = ['$element', '$attrs']; -function FormController(element, attrs) { - var form = this, - parentForm = element.parent().controller('form') || nullFormCtrl, - invalidCount = 0, // used to easily determine if we are valid - errors = form.$error = {}; - - // init state - form.$name = attrs.name; - form.$dirty = false; - form.$pristine = true; - form.$valid = true; - form.$invalid = false; - - parentForm.$addControl(form); - - // Setup initial state of the control - element.addClass(PRISTINE_CLASS); - toggleValidCss(true); - - // convenience method for easy toggling of classes - function toggleValidCss(isValid, validationErrorKey) { - validationErrorKey = validationErrorKey ? '-' + snake_case(validationErrorKey, '-') : ''; - element. - removeClass((isValid ? INVALID_CLASS : VALID_CLASS) + validationErrorKey). - addClass((isValid ? VALID_CLASS : INVALID_CLASS) + validationErrorKey); - } - - form.$addControl = function(control) { - if (control.$name && !form.hasOwnProperty(control.$name)) { - form[control.$name] = control; - } - }; - - form.$removeControl = function(control) { - if (control.$name && form[control.$name] === control) { - delete form[control.$name]; - } - forEach(errors, cleanupControlErrors, control); - }; - - form.$setValidity = function(validationToken, isValid, control) { - if (isValid) { - cleanupControlErrors(errors[validationToken], validationToken, control); - - if (!invalidCount) { - toggleValidCss(isValid); - form.$valid = true; - form.$invalid = false; - } - } else { - if (!invalidCount) { - toggleValidCss(isValid); - } - addControlError(validationToken, control); - - form.$valid = false; - form.$invalid = true; - } - }; - - form.$setDirty = function() { - element.removeClass(PRISTINE_CLASS).addClass(DIRTY_CLASS); - form.$dirty = true; - form.$pristine = false; - }; - - function cleanupControlErrors(queue, validationToken, control) { - if (queue) { - control = control || this; // so that we can be used in forEach; - arrayRemove(queue, control); - if (!queue.length) { - invalidCount--; - errors[validationToken] = false; - toggleValidCss(true, validationToken); - parentForm.$setValidity(validationToken, true, form); - } - } - } - - function addControlError(validationToken, control) { - var queue = errors[validationToken]; - if (queue) { - if (includes(queue, control)) return; - } else { - errors[validationToken] = queue = []; - invalidCount++; - toggleValidCss(false, validationToken); - parentForm.$setValidity(validationToken, false, form); - } - queue.push(control); - } -} - - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-form - * @restrict EAC - * - * @description - * Nestable alias of {@link angular.module.ng.$compileProvider.directive.form `form`} directive. HTML - * does not allow nesting of form elements. It is useful to nest forms, for example if the validity of a - * sub-group of controls needs to be determined. - * - * @param {string=} ng-form|name Name of the form. If specified, the form controller will be published into - * related scope, under this name. - * - */ - - /** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.form - * @restrict E - * - * @description - * Directive that instantiates - * {@link angular.module.ng.$compileProvider.directive.form.FormController FormController}. - * - * If `name` attribute is specified, the form controller is published onto the current scope under - * this name. - * - * # Alias: {@link angular.module.ng.$compileProvider.directive.ng-form `ng-form`} - * - * In angular forms can be nested. This means that the outer form is valid when all of the child - * forms are valid as well. However browsers do not allow nesting of `

` elements, for this - * reason angular provides {@link angular.module.ng.$compileProvider.directive.ng-form `ng-form`} alias - * which behaves identical to `` but allows form nesting. - * - * - * # CSS classes - * - `ng-valid` Is set if the form is valid. - * - `ng-invalid` Is set if the form is invalid. - * - `ng-pristine` Is set if the form is pristine. - * - `ng-dirty` Is set if the form is dirty. - * - * - * # Submitting a form and preventing default action - * - * Since the role of forms in client-side Angular applications is different than in classical - * roundtrip apps, it is desirable for the browser not to translate the form submission into a full - * page reload that sends the data to the server. Instead some javascript logic should be triggered - * to handle the form submission in application specific way. - * - * For this reason, Angular prevents the default action (form submission to the server) unless the - * `` element has an `action` attribute specified. - * - * You can use one of the following two ways to specify what javascript method should be called when - * a form is submitted: - * - * - ng-submit on the form element (add link to ng-submit) - * - ng-click on the first button or input field of type submit (input[type=submit]) - * - * To prevent double execution of the handler, use only one of ng-submit or ng-click. This is - * because of the following form submission rules coming from the html spec: - * - * - If a form has only one input field then hitting enter in this field triggers form submit - * (`ng-submit`) - * - if a form has has 2+ input fields and no buttons or input[type=submit] then hitting enter - * doesn't trigger submit - * - if a form has one or more input fields and one or more buttons or input[type=submit] then - * hitting enter in any of the input fields will trigger the click handler on the *first* button or - * input[type=submit] (`ng-click`) *and* a submit handler on the enclosing form (`ng-submit`) - * - * @param {string=} name Name of the form. If specified, the form controller will be published into - * related scope, under this name. - * - * @example - - - - - userType: - Required!
- userType = {{userType}}
- myForm.input.$valid = {{myForm.input.$valid}}
- myForm.input.$error = {{myForm.input.$error}}
- myForm.$valid = {{myForm.$valid}}
- myForm.$error.REQUIRED = {{!!myForm.$error.REQUIRED}}
- - - - it('should initialize to model', function() { - expect(binding('userType')).toEqual('guest'); - expect(binding('myForm.input.$valid')).toEqual('true'); - }); - - it('should be invalid if empty', function() { - input('userType').enter(''); - expect(binding('userType')).toEqual(''); - expect(binding('myForm.input.$valid')).toEqual('false'); - }); - -

- */ -var formDirectiveDir = { - name: 'form', - restrict: 'E', - controller: FormController, - compile: function() { - return { - pre: function(scope, formElement, attr, controller) { - if (!attr.action) { - formElement.bind('submit', function(event) { - event.preventDefault(); - }); - } - - var parentFormCtrl = formElement.parent().controller('form'), - alias = attr.name || attr.ngForm; - - if (alias) { - scope[alias] = controller; - } - if (parentFormCtrl) { - formElement.bind('$destroy', function() { - parentFormCtrl.$removeControl(controller); - if (alias) { - scope[alias] = undefined; - } - extend(controller, nullFormCtrl); //stop propagating child destruction handlers upwards - }); - } - } - }; - } -}; - -var formDirective = valueFn(formDirectiveDir); -var ngFormDirective = valueFn(extend(copy(formDirectiveDir), {restrict: 'EAC'})); diff --git a/src/directive/input.js b/src/directive/input.js deleted file mode 100644 index 348c9f25..00000000 --- a/src/directive/input.js +++ /dev/null @@ -1,1194 +0,0 @@ -'use strict'; - -var URL_REGEXP = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/; -var EMAIL_REGEXP = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/; -var NUMBER_REGEXP = /^\s*(\-|\+)?(\d+|(\d*(\.\d*)))\s*$/; - -var inputType = { - - /** - * @ngdoc inputType - * @name angular.module.ng.$compileProvider.directive.input.text - * - * @description - * Standard HTML text input with angular data binding. - * - * @param {string} ng-model Assignable angular expression to data-bind to. - * @param {string=} name Property name of the form under which the control is published. - * @param {string=} required Sets `required` validation error key if the value is not entered. - * @param {number=} ng-minlength Sets `minlength` validation error key if the value is shorter than - * minlength. - * @param {number=} ng-maxlength Sets `maxlength` validation error key if the value is longer than - * maxlength. - * @param {string=} ng-pattern Sets `pattern` validation error key if the value does not match the - * RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for - * patterns defined as scope expressions. - * @param {string=} ng-change Angular expression to be executed when input changes due to user - * interaction with the input element. - * - * @example - - - - - - - it('should initialize to model', function() { - expect(binding('text')).toEqual('guest'); - expect(binding('myForm.input.$valid')).toEqual('true'); - }); - - it('should be invalid if empty', function() { - input('text').enter(''); - expect(binding('text')).toEqual(''); - expect(binding('myForm.input.$valid')).toEqual('false'); - }); - - it('should be invalid if multi word', function() { - input('text').enter('hello world'); - expect(binding('myForm.input.$valid')).toEqual('false'); - }); - - - */ - 'text': textInputType, - - - /** - * @ngdoc inputType - * @name angular.module.ng.$compileProvider.directive.input.number - * - * @description - * Text input with number validation and transformation. Sets the `number` validation - * error if not a valid number. - * - * @param {string} ng-model Assignable angular expression to data-bind to. - * @param {string=} name Property name of the form under which the control is published. - * @param {string=} min Sets the `min` validation error key if the value entered is less then `min`. - * @param {string=} max Sets the `max` validation error key if the value entered is greater then `min`. - * @param {string=} required Sets `required` validation error key if the value is not entered. - * @param {number=} ng-minlength Sets `minlength` validation error key if the value is shorter than - * minlength. - * @param {number=} ng-maxlength Sets `maxlength` validation error key if the value is longer than - * maxlength. - * @param {string=} ng-pattern Sets `pattern` validation error key if the value does not match the - * RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for - * patterns defined as scope expressions. - * @param {string=} ng-change Angular expression to be executed when input changes due to user - * interaction with the input element. - * - * @example - - - - - - - it('should initialize to model', function() { - expect(binding('value')).toEqual('12'); - expect(binding('myForm.input.$valid')).toEqual('true'); - }); - - it('should be invalid if empty', function() { - input('value').enter(''); - expect(binding('value')).toEqual(''); - expect(binding('myForm.input.$valid')).toEqual('false'); - }); - - it('should be invalid if over max', function() { - input('value').enter('123'); - expect(binding('value')).toEqual(''); - expect(binding('myForm.input.$valid')).toEqual('false'); - }); - - - */ - 'number': numberInputType, - - - /** - * @ngdoc inputType - * @name angular.module.ng.$compileProvider.directive.input.url - * - * @description - * Text input with URL validation. Sets the `url` validation error key if the content is not a - * valid URL. - * - * @param {string} ng-model Assignable angular expression to data-bind to. - * @param {string=} name Property name of the form under which the control is published. - * @param {string=} required Sets `required` validation error key if the value is not entered. - * @param {number=} ng-minlength Sets `minlength` validation error key if the value is shorter than - * minlength. - * @param {number=} ng-maxlength Sets `maxlength` validation error key if the value is longer than - * maxlength. - * @param {string=} ng-pattern Sets `pattern` validation error key if the value does not match the - * RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for - * patterns defined as scope expressions. - * @param {string=} ng-change Angular expression to be executed when input changes due to user - * interaction with the input element. - * - * @example - - - - - - - it('should initialize to model', function() { - expect(binding('text')).toEqual('http://google.com'); - expect(binding('myForm.input.$valid')).toEqual('true'); - }); - - it('should be invalid if empty', function() { - input('text').enter(''); - expect(binding('text')).toEqual(''); - expect(binding('myForm.input.$valid')).toEqual('false'); - }); - - it('should be invalid if not url', function() { - input('text').enter('xxx'); - expect(binding('myForm.input.$valid')).toEqual('false'); - }); - - - */ - 'url': urlInputType, - - - /** - * @ngdoc inputType - * @name angular.module.ng.$compileProvider.directive.input.email - * - * @description - * Text input with email validation. Sets the `email` validation error key if not a valid email - * address. - * - * @param {string} ng-model Assignable angular expression to data-bind to. - * @param {string=} name Property name of the form under which the control is published. - * @param {string=} required Sets `required` validation error key if the value is not entered. - * @param {number=} ng-minlength Sets `minlength` validation error key if the value is shorter than - * minlength. - * @param {number=} ng-maxlength Sets `maxlength` validation error key if the value is longer than - * maxlength. - * @param {string=} ng-pattern Sets `pattern` validation error key if the value does not match the - * RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for - * patterns defined as scope expressions. - * - * @example - - - - - - - it('should initialize to model', function() { - expect(binding('text')).toEqual('me@example.com'); - expect(binding('myForm.input.$valid')).toEqual('true'); - }); - - it('should be invalid if empty', function() { - input('text').enter(''); - expect(binding('text')).toEqual(''); - expect(binding('myForm.input.$valid')).toEqual('false'); - }); - - it('should be invalid if not email', function() { - input('text').enter('xxx'); - expect(binding('myForm.input.$valid')).toEqual('false'); - }); - - - */ - 'email': emailInputType, - - - /** - * @ngdoc inputType - * @name angular.module.ng.$compileProvider.directive.input.radio - * - * @description - * HTML radio button. - * - * @param {string} ng-model Assignable angular expression to data-bind to. - * @param {string} value The value to which the expression should be set when selected. - * @param {string=} name Property name of the form under which the control is published. - * @param {string=} ng-change Angular expression to be executed when input changes due to user - * interaction with the input element. - * - * @example - - - - - - - it('should change state', function() { - expect(binding('color')).toEqual('blue'); - - input('color').select('red'); - expect(binding('color')).toEqual('red'); - }); - - - */ - 'radio': radioInputType, - - - /** - * @ngdoc inputType - * @name angular.module.ng.$compileProvider.directive.input.checkbox - * - * @description - * HTML checkbox. - * - * @param {string} ng-model Assignable angular expression to data-bind to. - * @param {string=} name Property name of the form under which the control is published. - * @param {string=} ng-true-value The value to which the expression should be set when selected. - * @param {string=} ng-false-value The value to which the expression should be set when not selected. - * @param {string=} ng-change Angular expression to be executed when input changes due to user - * interaction with the input element. - * - * @example - - - - - - - it('should change state', function() { - expect(binding('value1')).toEqual('true'); - expect(binding('value2')).toEqual('YES'); - - input('value1').check(); - input('value2').check(); - expect(binding('value1')).toEqual('false'); - expect(binding('value2')).toEqual('NO'); - }); - - - */ - 'checkbox': checkboxInputType, - - 'hidden': noop, - 'button': noop, - 'submit': noop, - 'reset': noop -}; - - -function isEmpty(value) { - return isUndefined(value) || value === '' || value === null || value !== value; -} - - -function textInputType(scope, element, attr, ctrl) { - element.bind('blur', function() { - scope.$apply(function() { - ctrl.$setViewValue(trim(element.val())); - }); - }); - - ctrl.$render = function() { - element.val(isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue); - }; - - // pattern validator - var pattern = attr.ngPattern, - patternValidator; - - var validate = function(regexp, value) { - if (isEmpty(value) || regexp.test(value)) { - ctrl.$setValidity('pattern', true); - return value; - } else { - ctrl.$setValidity('pattern', false); - return undefined; - } - }; - - if (pattern) { - if (pattern.match(/^\/(.*)\/$/)) { - pattern = new RegExp(pattern.substr(1, pattern.length - 2)); - patternValidator = function(value) { - return validate(pattern, value) - }; - } else { - patternValidator = function(value) { - var patternObj = scope.$eval(pattern); - - if (!patternObj || !patternObj.test) { - throw new Error('Expected ' + pattern + ' to be a RegExp but was ' + patternObj); - } - return validate(patternObj, value); - }; - } - - ctrl.$formatters.push(patternValidator); - ctrl.$parsers.push(patternValidator); - } - - // min length validator - if (attr.ngMinlength) { - var minlength = int(attr.ngMinlength); - var minLengthValidator = function(value) { - if (!isEmpty(value) && value.length < minlength) { - ctrl.$setValidity('minlength', false); - return undefined; - } else { - ctrl.$setValidity('minlength', true); - return value; - } - }; - - ctrl.$parsers.push(minLengthValidator); - ctrl.$formatters.push(minLengthValidator); - } - - // max length validator - if (attr.ngMaxlength) { - var maxlength = int(attr.ngMaxlength); - var maxLengthValidator = function(value) { - if (!isEmpty(value) && value.length > maxlength) { - ctrl.$setValidity('maxlength', false); - return undefined; - } else { - ctrl.$setValidity('maxlength', true); - return value; - } - }; - - ctrl.$parsers.push(maxLengthValidator); - ctrl.$formatters.push(maxLengthValidator); - } -}; - -function numberInputType(scope, element, attr, ctrl) { - textInputType(scope, element, attr, ctrl); - - ctrl.$parsers.push(function(value) { - var empty = isEmpty(value); - if (empty || NUMBER_REGEXP.test(value)) { - ctrl.$setValidity('number', true); - return value === '' ? null : (empty ? value : parseFloat(value)); - } else { - ctrl.$setValidity('number', false); - return undefined; - } - }); - - ctrl.$formatters.push(function(value) { - return isEmpty(value) ? '' : '' + value; - }); - - if (attr.min) { - var min = parseFloat(attr.min); - var minValidator = function(value) { - if (!isEmpty(value) && value < min) { - ctrl.$setValidity('min', false); - return undefined; - } else { - ctrl.$setValidity('min', true); - return value; - } - }; - - ctrl.$parsers.push(minValidator); - ctrl.$formatters.push(minValidator); - } - - if (attr.max) { - var max = parseFloat(attr.max); - var maxValidator = function(value) { - if (!isEmpty(value) && value > max) { - ctrl.$setValidity('max', false); - return undefined; - } else { - ctrl.$setValidity('max', true); - return value; - } - }; - - ctrl.$parsers.push(maxValidator); - ctrl.$formatters.push(maxValidator); - } - - ctrl.$formatters.push(function(value) { - - if (isEmpty(value) || isNumber(value)) { - ctrl.$setValidity('number', true); - return value; - } else { - ctrl.$setValidity('number', false); - return undefined; - } - }); -} - -function urlInputType(scope, element, attr, ctrl) { - textInputType(scope, element, attr, ctrl); - - var urlValidator = function(value) { - if (isEmpty(value) || URL_REGEXP.test(value)) { - ctrl.$setValidity('url', true); - return value; - } else { - ctrl.$setValidity('url', false); - return undefined; - } - }; - - ctrl.$formatters.push(urlValidator); - ctrl.$parsers.push(urlValidator); -} - -function emailInputType(scope, element, attr, ctrl) { - textInputType(scope, element, attr, ctrl); - - var emailValidator = function(value) { - if (isEmpty(value) || EMAIL_REGEXP.test(value)) { - ctrl.$setValidity('email', true); - return value; - } else { - ctrl.$setValidity('email', false); - return undefined; - } - }; - - ctrl.$formatters.push(emailValidator); - ctrl.$parsers.push(emailValidator); -} - -function radioInputType(scope, element, attr, ctrl) { - // correct the name - element.attr('name', attr.id + '@' + attr.name); - - element.bind('click', function() { - if (element[0].checked) { - scope.$apply(function() { - ctrl.$setViewValue(attr.value); - }); - }; - }); - - ctrl.$render = function() { - var value = attr.value; - element[0].checked = (value == ctrl.$viewValue); - }; - - attr.$observe('value', ctrl.$render); -} - -function checkboxInputType(scope, element, attr, ctrl) { - var trueValue = attr.ngTrueValue, - falseValue = attr.ngFalseValue; - - if (!isString(trueValue)) trueValue = true; - if (!isString(falseValue)) falseValue = false; - - element.bind('click', function() { - scope.$apply(function() { - ctrl.$setViewValue(element[0].checked); - }); - }); - - ctrl.$render = function() { - element[0].checked = ctrl.$viewValue; - }; - - ctrl.$formatters.push(function(value) { - return value === trueValue; - }); - - ctrl.$parsers.push(function(value) { - return value ? trueValue : falseValue; - }); -} - - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.textarea - * - * @description - * HTML textarea element control with angular data-binding. The data-binding and validation - * properties of this element are exactly the same as those of the - * {@link angular.module.ng.$compileProvider.directive.input input element}. - * - * @param {string} ng-model Assignable angular expression to data-bind to. - * @param {string=} name Property name of the form under which the control is published. - * @param {string=} required Sets `required` validation error key if the value is not entered. - * @param {number=} ng-minlength Sets `minlength` validation error key if the value is shorter than - * minlength. - * @param {number=} ng-maxlength Sets `maxlength` validation error key if the value is longer than - * maxlength. - * @param {string=} ng-pattern Sets `pattern` validation error key if the value does not match the - * RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for - * patterns defined as scope expressions. - * @param {string=} ng-change Angular expression to be executed when input changes due to user - * interaction with the input element. - */ - - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.input - * @restrict E - * - * @description - * HTML input element control with angular data-binding. Input control follows HTML5 input types - * and polyfills the HTML5 validation behavior for older browsers. - * - * @param {string} ng-model Assignable angular expression to data-bind to. - * @param {string=} name Property name of the form under which the control is published. - * @param {string=} required Sets `required` validation error key if the value is not entered. - * @param {number=} ng-minlength Sets `minlength` validation error key if the value is shorter than - * minlength. - * @param {number=} ng-maxlength Sets `maxlength` validation error key if the value is longer than - * maxlength. - * @param {string=} ng-pattern Sets `pattern` validation error key if the value does not match the - * RegExp pattern expression. Expected value is `/regexp/` for inline patterns or `regexp` for - * patterns defined as scope expressions. - * @param {string=} ng-change Angular expression to be executed when input changes due to user - * interaction with the input element. - * - * @example - - - -

- -

- user = {{user}}
- myForm.userName.$valid = {{myForm.userName.$valid}}
- myForm.userName.$error = {{myForm.userName.$error}}
- myForm.lastName.$valid = {{myForm.lastName.$valid}}
- myForm.userName.$error = {{myForm.lastName.$error}}
- myForm.$valid = {{myForm.$valid}}
- myForm.$error.required = {{!!myForm.$error.required}}
- myForm.$error.minlength = {{!!myForm.$error.minlength}}
- myForm.$error.maxlength = {{!!myForm.$error.maxlength}}
-

- - - it('should initialize to model', function() { - expect(binding('user')).toEqual('{"last":"visitor","name":"guest"}'); - expect(binding('myForm.userName.$valid')).toEqual('true'); - expect(binding('myForm.$valid')).toEqual('true'); - }); - - it('should be invalid if empty when required', function() { - input('user.name').enter(''); - expect(binding('user')).toEqual('{"last":"visitor"}'); - expect(binding('myForm.userName.$valid')).toEqual('false'); - expect(binding('myForm.$valid')).toEqual('false'); - }); - - it('should be valid if empty when min length is set', function() { - input('user.last').enter(''); - expect(binding('user')).toEqual('{"last":"","name":"guest"}'); - expect(binding('myForm.lastName.$valid')).toEqual('true'); - expect(binding('myForm.$valid')).toEqual('true'); - }); - - it('should be invalid if less than required min length', function() { - input('user.last').enter('xx'); - expect(binding('user')).toEqual('{"name":"guest"}'); - expect(binding('myForm.lastName.$valid')).toEqual('false'); - expect(binding('myForm.lastName.$error')).toMatch(/minlength/); - expect(binding('myForm.$valid')).toEqual('false'); - }); - - it('should be invalid if longer than max length', function() { - input('user.last').enter('some ridiculously long name'); - expect(binding('user')) - .toEqual('{"name":"guest"}'); - expect(binding('myForm.lastName.$valid')).toEqual('false'); - expect(binding('myForm.lastName.$error')).toMatch(/maxlength/); - expect(binding('myForm.$valid')).toEqual('false'); - }); - - - */ -var inputDirective = [function() { - return { - restrict: 'E', - require: '?ngModel', - link: function(scope, element, attr, ctrl) { - if (ctrl) { - (inputType[lowercase(attr.type)] || inputType.text)(scope, element, attr, ctrl); - } - } - }; -}]; - -var VALID_CLASS = 'ng-valid', - INVALID_CLASS = 'ng-invalid', - PRISTINE_CLASS = 'ng-pristine', - DIRTY_CLASS = 'ng-dirty'; - -/** - * @ngdoc object - * @name angular.module.ng.$compileProvider.directive.ng-model.NgModelController - * - * @property {string} $viewValue Actual string value in the view. - * @property {*} $modelValue The value in the model, that the control is bound to. - * @property {Array.} $parsers Whenever the control reads value from the DOM, it executes - * all of these functions to sanitize / convert the value as well as validate. - * - * @property {Array.} $formatters Whenever the model value changes, it executes all of - * these functions to convert the value as well as validate. - * - * @property {Object} $error An bject hash with all errors as keys. - * - * @property {boolean} $pristine True if user has not interacted with the control yet. - * @property {boolean} $dirty True if user has already interacted with the control. - * @property {boolean} $valid True if there is no error. - * @property {boolean} $invalid True if at least one error on the control. - * - * @description - * - */ -var NgModelController = ['$scope', '$exceptionHandler', '$attrs', 'ngModel', '$element', - function($scope, $exceptionHandler, $attr, ngModel, $element) { - this.$viewValue = Number.NaN; - this.$modelValue = Number.NaN; - this.$parsers = []; - this.$formatters = []; - this.$viewChangeListeners = []; - this.$pristine = true; - this.$dirty = false; - this.$valid = true; - this.$invalid = false; - this.$render = noop; - this.$name = $attr.name; - - var parentForm = $element.inheritedData('$formController') || nullFormCtrl, - invalidCount = 0, // used to easily determine if we are valid - $error = this.$error = {}; // keep invalid keys here - - - // Setup initial state of the control - $element.addClass(PRISTINE_CLASS); - toggleValidCss(true); - - // convenience method for easy toggling of classes - function toggleValidCss(isValid, validationErrorKey) { - validationErrorKey = validationErrorKey ? '-' + snake_case(validationErrorKey, '-') : ''; - $element. - removeClass((isValid ? INVALID_CLASS : VALID_CLASS) + validationErrorKey). - addClass((isValid ? VALID_CLASS : INVALID_CLASS) + validationErrorKey); - } - - /** - * @ngdoc function - * @name angular.module.ng.$compileProvider.directive.ng-model.NgModelController#$setValidity - * @methodOf angular.module.ng.$compileProvider.directive.ng-model.NgModelController - * - * @description - * Change the validity state, and notifies the form when the control changes validity. (i.e. it - * does not notify form if given validator is already marked as invalid). - * - * This method should be called by validators - i.e. the parser or formatter functions. - * - * @param {string} validationErrorKey Name of the validator. the `validationErrorKey` will assign - * to `$error[validationErrorKey]=isValid` so that it is available for data-binding. - * The `validationErrorKey` should be in camelCase and will get converted into dash-case - * for class name. Example: `myError` will result in `ng-valid-my-error` and `ng-invalid-my-error` - * class and can be bound to as `{{someForm.someControl.$error.myError}}` . - * @param {boolean} isValid Whether the current state is valid (true) or invalid (false). - */ - this.$setValidity = function(validationErrorKey, isValid) { - if ($error[validationErrorKey] === !isValid) return; - - if (isValid) { - if ($error[validationErrorKey]) invalidCount--; - if (!invalidCount) { - toggleValidCss(true); - this.$valid = true; - this.$invalid = false; - } - } else { - toggleValidCss(false) - this.$invalid = true; - this.$valid = false; - invalidCount++; - } - - $error[validationErrorKey] = !isValid; - toggleValidCss(isValid, validationErrorKey); - - parentForm.$setValidity(validationErrorKey, isValid, this); - }; - - - /** - * @ngdoc function - * @name angular.module.ng.$compileProvider.directive.ng-model.NgModelController#$setViewValue - * @methodOf angular.module.ng.$compileProvider.directive.ng-model.NgModelController - * - * @description - * Read a value from view. - * - * This method should be called from within a DOM event handler. - * For example {@link angular.module.ng.$compileProvider.directive.input input} or - * {@link angular.module.ng.$compileProvider.directive.select select} directives call it. - * - * It internally calls all `formatters` and if resulted value is valid, updates the model and - * calls all registered change listeners. - * - * @param {string} value Value from the view. - */ - this.$setViewValue = function(value) { - this.$viewValue = value; - - // change to dirty - if (this.$pristine) { - this.$dirty = true; - this.$pristine = false; - $element.removeClass(PRISTINE_CLASS).addClass(DIRTY_CLASS); - parentForm.$setDirty(); - } - - forEach(this.$parsers, function(fn) { - value = fn(value); - }); - - if (this.$modelValue !== value) { - this.$modelValue = value; - ngModel(value); - forEach(this.$viewChangeListeners, function(listener) { - try { - listener(); - } catch(e) { - $exceptionHandler(e); - } - }) - } - }; - - // model -> value - var ctrl = this; - $scope.$watch(function() { - return ngModel(); - }, function(value) { - - // ignore change from view - if (ctrl.$modelValue === value) return; - - var formatters = ctrl.$formatters, - idx = formatters.length; - - ctrl.$modelValue = value; - while(idx--) { - value = formatters[idx](value); - } - - if (ctrl.$viewValue !== value) { - ctrl.$viewValue = value; - ctrl.$render(); - } - }); -}]; - - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-model - * - * @element input - * - * @description - * Is directive that tells Angular to do two-way data binding. It works together with `input`, - * `select`, `textarea`. You can easily write your own directives to use `ng-model` as well. - * - * `ng-model` is responsible for: - * - * - binding the view into the model, which other directives such as `input`, `textarea` or `select` - * require, - * - providing validation behavior (i.e. required, number, email, url), - * - keeping state of the control (valid/invalid, dirty/pristine, validation errors), - * - setting related css class onto the element (`ng-valid`, `ng-invalid`, `ng-dirty`, `ng-pristine`), - * - register the control with parent {@link angular.module.ng.$compileProvider.directive.form form}. - * - * For basic examples, how to use `ng-model`, see: - * - * - {@link angular.module.ng.$compileProvider.directive.input input} - * - {@link angular.module.ng.$compileProvider.directive.input.text text} - * - {@link angular.module.ng.$compileProvider.directive.input.checkbox checkbox} - * - {@link angular.module.ng.$compileProvider.directive.input.radio radio} - * - {@link angular.module.ng.$compileProvider.directive.input.number number} - * - {@link angular.module.ng.$compileProvider.directive.input.email email} - * - {@link angular.module.ng.$compileProvider.directive.input.url url} - * - {@link angular.module.ng.$compileProvider.directive.select select} - * - {@link angular.module.ng.$compileProvider.directive.textarea textarea} - * - */ -var ngModelDirective = [function() { - return { - inject: { - ngModel: 'accessor' - }, - require: ['ngModel', '^?form'], - controller: NgModelController, - link: function(scope, element, attr, ctrls) { - // notify others, especially parent forms - - var modelCtrl = ctrls[0], - formCtrl = ctrls[1] || nullFormCtrl; - - formCtrl.$addControl(modelCtrl); - - element.bind('$destroy', function() { - formCtrl.$removeControl(modelCtrl); - }); - } - }; -}]; - - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-change - * @restrict E - * - * @description - * Evaluate given expression when user changes the input. - * The expression is not evaluated when the value change is coming from the model. - * - * Note, this directive requires `ng-model` to be present. - * - * @element input - * - * @example - * - * - * - *

- * - * - * Confirmed
- * debug = {{confirmed}}
- * counter = {{counter}} - *

- * - * - * it('should evaluate the expression if changing from view', function() { - * expect(binding('counter')).toEqual('0'); - * element('#ng-change-example1').click(); - * expect(binding('counter')).toEqual('1'); - * expect(binding('confirmed')).toEqual('true'); - * }); - * - * it('should not evaluate the expression if changing from model', function() { - * element('#ng-change-example2').click(); - * expect(binding('counter')).toEqual('0'); - * expect(binding('confirmed')).toEqual('true'); - * }); - * - * - */ -var ngChangeDirective = valueFn({ - require: 'ngModel', - link: function(scope, element, attr, ctrl) { - ctrl.$viewChangeListeners.push(function() { - scope.$eval(attr.ngChange); - }); - } -}); - - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-model-instant - * - * @element input - * - * @description - * By default, Angular udpates the model only on `blur` event - when the input looses focus. - * If you want to update after every key stroke, use `ng-model-instant`. - * - * @example - * - * - * First name:
- * Last name:
- * - * First name ({{firstName}}) is only updated on `blur` event, but the last name ({{lastName}}) - * is updated immediately, because of using `ng-model-instant`. - * - * - * it('should update first name on blur', function() { - * input('firstName').enter('santa', 'blur'); - * expect(binding('firstName')).toEqual('santa'); - * }); - * - * it('should update last name immediately', function() { - * input('lastName').enter('santa', 'keydown'); - * expect(binding('lastName')).toEqual('santa'); - * }); - * - * - */ -var ngModelInstantDirective = ['$browser', function($browser) { - return { - require: 'ngModel', - link: function(scope, element, attr, ctrl) { - var handler = function() { - scope.$apply(function() { - ctrl.$setViewValue(trim(element.val())); - }); - }; - - var timeout; - element.bind('keydown', function(event) { - var key = event.keyCode; - - // command modifiers arrows - if (key === 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) return; - - if (!timeout) { - timeout = $browser.defer(function() { - handler(); - timeout = null; - }); - } - }); - - element.bind('change input', handler); - } - }; -}]; - - -var requiredDirective = [function() { - return { - require: '?ngModel', - link: function(scope, elm, attr, ctrl) { - if (!ctrl) return; - - var validator = function(value) { - if (attr.required && (isEmpty(value) || value === false)) { - ctrl.$setValidity('required', false); - return; - } else { - ctrl.$setValidity('required', true); - return value; - } - }; - - ctrl.$formatters.push(validator); - ctrl.$parsers.unshift(validator); - - attr.$observe('required', function() { - validator(ctrl.$viewValue); - }); - } - }; -}]; - - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-list - * - * @description - * Text input that converts between comma-seperated string into an array of strings. - * - * @element input - * @param {string=} ng-list optional delimiter that should be used to split the value. If - * specified in form `/something/` then the value will be converted into a regular expression. - * - * @example - - - - - - - it('should initialize to model', function() { - expect(binding('names')).toEqual('["igor","misko","vojta"]'); - expect(binding('myForm.namesInput.$valid')).toEqual('true'); - }); - - it('should be invalid if empty', function() { - input('names').enter(''); - expect(binding('names')).toEqual('[]'); - expect(binding('myForm.namesInput.$valid')).toEqual('false'); - }); - - - */ -var ngListDirective = function() { - return { - require: 'ngModel', - link: function(scope, element, attr, ctrl) { - var match = /\/(.*)\//.exec(attr.ngList), - separator = match && new RegExp(match[1]) || attr.ngList || ','; - - var parse = function(viewValue) { - var list = []; - - if (viewValue) { - forEach(viewValue.split(separator), function(value) { - if (value) list.push(trim(value)); - }); - } - - return list; - }; - - ctrl.$parsers.push(parse); - ctrl.$formatters.push(function(value) { - if (isArray(value) && !equals(parse(ctrl.$viewValue), value)) { - return value.join(', '); - } - - return undefined; - }); - } - }; -}; - - -var CONSTANT_VALUE_REGEXP = /^(true|false|\d+)$/; - -var ngValueDirective = [function() { - return { - priority: 100, - compile: function(tpl, attr) { - if (CONSTANT_VALUE_REGEXP.test(attr.ngValue)) { - return function(scope) { - attr.$set('value', scope.$eval(attr.ngValue)); - }; - } else { - attr.$observers.value = []; - - return function(scope) { - scope.$watch(attr.ngValue, function(value) { - attr.$set('value', value, false); - }); - }; - } - } - }; -}]; diff --git a/src/directive/ngBind.js b/src/directive/ngBind.js deleted file mode 100644 index 32be2f4b..00000000 --- a/src/directive/ngBind.js +++ /dev/null @@ -1,155 +0,0 @@ -'use strict'; - -/** - * @ngdoc directive - * @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 - * with the value of a given expression, and to update the text content when the value of that - * expression changes. - * - * Typically, you don't use `ng-bind` directly, but instead you use the double curly markup like - * `{{ expression }}` and let the Angular compiler transform it to - * `` when the template is compiled. - * - * @element ANY - * @param {expression} ng-bind {@link guide/dev_guide.expressions Expression} to evaluate. - * - * @example - * Enter a name in the Live Preview text box; the greeting below the text box changes instantly. - - - -

- Enter name:
- Hello ! -

- - - it('should check ng-bind', function() { - expect(using('.doc-example-live').binding('name')).toBe('Whirled'); - using('.doc-example-live').input('name').enter('world'); - expect(using('.doc-example-live').binding('name')).toBe('world'); - }); - - - */ -var ngBindDirective = ngDirective(function(scope, element, attr) { - element.addClass('ng-binding').data('$binding', attr.ngBind); - scope.$watch(attr.ngBind, function(value) { - element.text(value == undefined ? '' : value); - }); -}); - - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-bind-html-unsafe - * - * @description - * Creates a binding that will innerHTML the result of evaluating the `expression` into the current - * element. *The innerHTML-ed content will not be sanitized!* You should use this directive only if - * {@link angular.module.ng.$compileProvider.directive.ng-bind-html ng-bind-html} directive is too - * restrictive and when you absolutely trust the source of the content you are binding to. - * - * See {@link angular.module.ng.$sanitize $sanitize} docs for examples. - * - * @element ANY - * @param {expression} ng-bind-html-unsafe {@link guide/dev_guide.expressions Expression} to evaluate. - */ -var ngBindHtmlUnsafeDirective = ngDirective(function(scope, element, attr) { - element.addClass('ng-binding').data('$binding', attr.ngBindHtmlUnsafe); - scope.$watch(attr.ngBindHtmlUnsafe, function(value) { - element.html(value == undefined ? '' : value); - }); -}); - - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-bind-html - * - * @description - * Creates a binding that will sanitize the result of evaluating the `expression` with the - * {@link angular.module.ng.$sanitize $sanitize} service and innerHTML the result into the current - * element. - * - * See {@link angular.module.ng.$sanitize $sanitize} docs for examples. - * - * @element ANY - * @param {expression} ng-bind-html {@link guide/dev_guide.expressions Expression} to evaluate. - */ -var ngBindHtmlDirective = ['$sanitize', function($sanitize) { - return function(scope, element, attr) { - element.addClass('ng-binding').data('$binding', attr.ngBindHtml); - scope.$watch(attr.ngBindHtml, function(value) { - if (value = $sanitize(value)) { - element.html(value); - } - }); - } -}]; - - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-bind-template - * - * @description - * The `ng-bind-template` attribute specifies that the element - * text should be replaced with the template in ng-bind-template. - * Unlike ng-bind the ng-bind-template can contain multiple `{{` `}}` - * expressions. (This is required since some HTML elements - * can not have SPAN elements such as TITLE, or OPTION to name a few.) - * - * @element ANY - * @param {string} ng-bind-template template of form - * {{ expression }} to eval. - * - * @example - * Try it here: enter text in text box and watch the greeting change. - - - -

- Salutation:
- Name:
-

- - - it('should check ng-bind', function() { - expect(using('.doc-example-live').binding('salutation')). - toBe('Hello'); - expect(using('.doc-example-live').binding('name')). - toBe('World'); - using('.doc-example-live').input('salutation').enter('Greetings'); - using('.doc-example-live').input('name').enter('user'); - expect(using('.doc-example-live').binding('salutation')). - toBe('Greetings'); - expect(using('.doc-example-live').binding('name')). - toBe('user'); - }); - - - */ -var ngBindTemplateDirective = ['$interpolate', function($interpolate) { - return function(scope, element, attr) { - // TODO: move this to scenario runner - var interpolateFn = $interpolate(element.attr(attr.$attr.ngBindTemplate)); - element.addClass('ng-binding').data('$binding', interpolateFn); - attr.$observe('ngBindTemplate', function(value) { - element.text(value); - }); - } -}]; diff --git a/src/directive/ngClass.js b/src/directive/ngClass.js deleted file mode 100644 index 21b75dd0..00000000 --- a/src/directive/ngClass.js +++ /dev/null @@ -1,143 +0,0 @@ -'use strict'; - -function classDirective(name, selector) { - name = 'ngClass' + name; - return ngDirective(function(scope, element, attr) { - scope.$watch(attr[name], function(newVal, oldVal) { - if (selector === true || scope.$index % 2 === selector) { - if (oldVal && (newVal !== oldVal)) { - if (isObject(oldVal) && !isArray(oldVal)) - oldVal = map(oldVal, function(v, k) { if (v) return k }); - element.removeClass(isArray(oldVal) ? oldVal.join(' ') : oldVal); - } - if (isObject(newVal) && !isArray(newVal)) - newVal = map(newVal, function(v, k) { if (v) return k }); - if (newVal) element.addClass(isArray(newVal) ? newVal.join(' ') : newVal); } - }, true); - }); -} - -/** - * @ngdoc directive - * @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 - * expression that represents all classes to be added. - * - * The directive won't add duplicate classes if a particular class was already set. - * - * When the expression changes, the previously added classes are removed and only then the classes - * new classes are added. - * - * @element ANY - * @param {expression} ng-class {@link guide/dev_guide.expressions Expression} to eval. The result - * of the evaluation can be a string representing space delimited class - * names, an array, or a map of class names to boolean values. - * - * @example - - - - -
- Sample Text - - - it('should check ng-class', function() { - expect(element('.doc-example-live span').prop('className')).not(). - toMatch(/ng-invalid/); - - using('.doc-example-live').element(':button:first').click(); - - expect(element('.doc-example-live span').prop('className')). - toMatch(/ng-invalid/); - - using('.doc-example-live').element(':button:last').click(); - - expect(element('.doc-example-live span').prop('className')).not(). - toMatch(/ng-invalid/); - }); - - - */ -var ngClassDirective = classDirective('', true); - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-class-odd - * - * @description - * The `ng-class-odd` and `ng-class-even` works exactly as - * {@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.module.ng.$compileProvider.directive.ng-repeat ng-repeat}. - * - * @element ANY - * @param {expression} ng-class-odd {@link guide/dev_guide.expressions Expression} to eval. The result - * of the evaluation can be a string representing space delimited class names or an array. - * - * @example - - -

- - {{name}} - -

- - - it('should check ng-class-odd and ng-class-even', function() { - expect(element('.doc-example-live li:first span').prop('className')). - toMatch(/ng-format-negative/); - expect(element('.doc-example-live li:last span').prop('className')). - toMatch(/ng-invalid/); - }); - - - */ -var ngClassOddDirective = classDirective('Odd', 0); - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-class-even - * - * @description - * The `ng-class-odd` and `ng-class-even` works exactly as - * {@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.module.ng.$compileProvider.directive.ng-repeat ng-repeat}. - * - * @element ANY - * @param {expression} ng-class-even {@link guide/dev_guide.expressions Expression} to eval. The - * result of the evaluation can be a string representing space delimited class names or an array. - * - * @example - - -

- - {{name}} - -

- - - it('should check ng-class-odd and ng-class-even', function() { - expect(element('.doc-example-live li:first span').prop('className')). - toMatch(/odd/); - expect(element('.doc-example-live li:last span').prop('className')). - toMatch(/even/); - }); - - - */ -var ngClassEvenDirective = classDirective('Even', 1); diff --git a/src/directive/ngCloak.js b/src/directive/ngCloak.js deleted file mode 100644 index 7422e15a..00000000 --- a/src/directive/ngCloak.js +++ /dev/null @@ -1,61 +0,0 @@ -'use strict'; - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-cloak - * - * @description - * The `ng-cloak` directive is used to prevent the Angular html template from being briefly - * displayed by the browser in its raw (uncompiled) form while your application is loading. Use this - * directive to avoid the undesirable flicker effect caused by the html template display. - * - * The directive can be applied to the `` element, but typically a fine-grained application is - * prefered in order to benefit from progressive rendering of the browser view. - * - * `ng-cloak` works in cooperation with a css rule that is embedded within `angular.js` and - * `angular.min.js` files. Following is the css rule: - * - *

- * [ng\:cloak], .ng-cloak {
- *   display: none;
- * }
- *

- * - * When this css rule is loaded by the browser, all html elements (including their children) that - * are tagged with the `ng-cloak` directive are hidden. When Angular comes across this directive - * during the compilation of the template it deletes the `ng-cloak` element attribute, which - * makes the compiled element visible. - * - * For the best result, `angular.js` script must be loaded in the head section of the html file; - * alternatively, the css rule (above) must be included in the external stylesheet of the - * application. - * - * Legacy browsers, like IE7, do not provide attribute selector support (added in CSS 2.1) so they - * cannot match the `[ng\:cloak]` selector. To work around this limitation, you must add the css - * class `ng-cloak` in addition to `ng-cloak` directive as shown in the example below. - * - * @element ANY - * - * @example - - -

- - - it('should remove the template directive and css class', function() { - expect(element('.doc-example-live #template1').attr('ng-cloak')). - not().toBeDefined(); - expect(element('.doc-example-live #template2').attr('ng-cloak')). - not().toBeDefined(); - }); - - - * - */ -var ngCloakDirective = ngDirective({ - compile: function(element, attr) { - attr.$set('ngCloak', undefined); - element.removeClass('ng-cloak'); - } -}); diff --git a/src/directive/ngController.js b/src/directive/ngController.js deleted file mode 100644 index 8e2c6f3b..00000000 --- a/src/directive/ngController.js +++ /dev/null @@ -1,103 +0,0 @@ -'use strict'; - -/** - * @ngdoc directive - * @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 - * supports the principles behind the Model-View-Controller design pattern. - * - * MVC components in angular: - * - * * Model — The Model is data in scope properties; scopes are attached to the DOM. - * * View — The template (HTML with data bindings) is rendered into the View. - * * Controller — The `ng-controller` directive specifies a Controller class; the class has - * methods that typically express the business logic behind the application. - * - * Note that an alternative way to define controllers is via the `{@link angular.module.ng.$route}` - * service. - * - * @element ANY - * @scope - * @param {expression} ng-controller Name of a globally accessible constructor function or an - * {@link guide/dev_guide.expressions expression} that on the current scope evaluates to a - * constructor function. - * - * @example - * Here is a simple form for editing user contact information. Adding, removing, clearing, and - * greeting are methods declared on the controller (see source tab). These methods can - * easily be called from the angular markup. Notice that the scope becomes the `this` for the - * controller's instance. This allows for easy access to the view data from the controller. Also - * notice that any changes to the data are automatically reflected in the View without the need - * for a manual update. - - - -

- Name: - [ greet ]
- Contact: -

- - - [ clear - | X ] -
[ add ]

- - - it('should check controller', function() { - expect(element('.doc-example-live div>:input').val()).toBe('John Smith'); - expect(element('.doc-example-live li:nth-child(1) input').val()) - .toBe('408 555 1212'); - expect(element('.doc-example-live li:nth-child(2) input').val()) - .toBe('john.smith@example.org'); - - element('.doc-example-live li:first a:contains("clear")').click(); - expect(element('.doc-example-live li:first input').val()).toBe(''); - - element('.doc-example-live li:last a:contains("add")').click(); - expect(element('.doc-example-live li:nth-child(3) input').val()) - .toBe('yourname@example.org'); - }); - - - */ -var ngControllerDirective = [function() { - return { - scope: true, - controller: '@' - }; -}]; diff --git a/src/directive/ngEventDirs.js b/src/directive/ngEventDirs.js deleted file mode 100644 index 74028fee..00000000 --- a/src/directive/ngEventDirs.js +++ /dev/null @@ -1,222 +0,0 @@ -'use strict'; - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-click - * - * @description - * The ng-click allows you to specify custom behavior when - * element is clicked. - * - * @element ANY - * @param {expression} ng-click {@link guide/dev_guide.expressions Expression} to evaluate upon - * click. (Event object is available as `$event`) - * - * @example - - - - count: {{count}} - - - it('should check ng-click', function() { - expect(binding('count')).toBe('0'); - element('.doc-example-live :button').click(); - expect(binding('count')).toBe('1'); - }); - - - */ -/* - * A directive that allows creation of custom onclick handlers that are defined as angular - * expressions and are compiled and executed within the current scope. - * - * Events that are handled via these handler are always configured not to propagate further. - */ -var ngEventDirectives = {}; -forEach( - 'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave'.split(' '), - function(name) { - var directiveName = directiveNormalize('ng-' + name); - ngEventDirectives[directiveName] = ['$parse', function($parse) { - return function(scope, element, attr) { - var fn = $parse(attr[directiveName]); - element.bind(lowercase(name), function(event) { - scope.$apply(function() { - fn(scope, {$event:event}); - }); - }); - }; - }]; - } -); - -/** - * @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} ng-dblclick {@link guide/dev_guide.expressions Expression} to evaluate upon - * dblclick. (Event object is available as `$event`) - * - * @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} ng-mousedown {@link guide/dev_guide.expressions Expression} to evaluate upon - * mousedown. (Event object is available as `$event`) - * - * @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} ng-mouseup {@link guide/dev_guide.expressions Expression} to evaluate upon - * mouseup. (Event object is available as `$event`) - * - * @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} ng-mouseover {@link guide/dev_guide.expressions Expression} to evaluate upon - * mouseover. (Event object is available as `$event`) - * - * @example - * See {@link angular.module.ng.$compileProvider.directive.ng-click ng-click} - */ - - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-mouseenter - * - * @description - * Specify custom behavior on mouseenter event. - * - * @element ANY - * @param {expression} ng-mouseenter {@link guide/dev_guide.expressions Expression} to evaluate upon - * mouseenter. (Event object is available as `$event`) - * - * @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} ng-mouseleave {@link guide/dev_guide.expressions Expression} to evaluate upon - * mouseleave. (Event object is available as `$event`) - * - * @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} ng-mousemove {@link guide/dev_guide.expressions Expression} to evaluate upon - * mousemove. (Event object is available as `$event`) - * - * @example - * See {@link angular.module.ng.$compileProvider.directive.ng-click ng-click} - */ - - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-submit - * - * @description - * Enables binding angular expressions to onsubmit events. - * - * Additionally it prevents the default action (which for form means sending the request to the - * server and reloading the current page). - * - * @element form - * @param {expression} ng-submit {@link guide/dev_guide.expressions Expression} to eval. - * - * @example - - - -

- Enter text and hit enter: - - -

list={{list}}

- - - it('should check ng-submit', function() { - expect(binding('list')).toBe('[]'); - element('.doc-example-live #submit').click(); - expect(binding('list')).toBe('["hello"]'); - expect(input('text').val()).toBe(''); - }); - it('should ignore empty strings', function() { - expect(binding('list')).toBe('[]'); - element('.doc-example-live #submit').click(); - element('.doc-example-live #submit').click(); - expect(binding('list')).toBe('["hello"]'); - }); - - - */ -var ngSubmitDirective = ngDirective(function(scope, element, attrs) { - element.bind('submit', function() { - scope.$apply(attrs.ngSubmit); - }); -}); diff --git a/src/directive/ngInclude.js b/src/directive/ngInclude.js deleted file mode 100644 index 90fd0b40..00000000 --- a/src/directive/ngInclude.js +++ /dev/null @@ -1,131 +0,0 @@ -'use strict'; - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-include - * @restrict EA - * - * @description - * Fetches, compiles and includes an external HTML fragment. - * - * Keep in mind that Same Origin Policy applies to included resources - * (e.g. ng-include won't work for file:// access). - * - * @scope - * - * @param {string} ng-include|src angular expression evaluating to URL. If the source is a string constant, - * make sure you wrap it in quotes, e.g. `src="'myPartialTemplate.html'"`. - * @param {Scope=} [scope=new_child_scope] optional expression which evaluates to an - * instance of angular.module.ng.$rootScope.Scope to set the HTML fragment to. - * @param {string=} onload Expression to evaluate when a new partial is loaded. - * - * @param {string=} autoscroll Whether `ng-include` should call {@link angular.module.ng.$anchorScroll - * $anchorScroll} to scroll the viewport after the content is loaded. - * - * - If the attribute is not set, disable scrolling. - * - If the attribute is set without value, enable scrolling. - * - Otherwise enable scrolling only if the expression evaluates to truthy value. - * - * @example - - - -

- - url of the template: {{template.url}} -

- - - it('should load template1.html', function() { - expect(element('.doc-example-live [ng-include]').text()). - toBe('Content of template1.html\n'); - }); - it('should load template2.html', function() { - select('template').option('1'); - expect(element('.doc-example-live [ng-include]').text()). - toBe('Content of template2.html\n'); - }); - it('should change to blank', function() { - select('template').option(''); - expect(element('.doc-example-live [ng-include]').text()).toEqual(''); - }); - - - */ - - -/** - * @ngdoc event - * @name angular.module.ng.$compileProvider.directive.ng-include#$includeContentLoaded - * @eventOf angular.module.ng.$compileProvider.directive.ng-include - * @eventType emit on the current ng-include scope - * @description - * Emitted every time the ng-include content is reloaded. - */ -var ngIncludeDirective = ['$http', '$templateCache', '$anchorScroll', '$compile', - function($http, $templateCache, $anchorScroll, $compile) { - return { - restrict: 'EA', - compile: function(element, attr) { - var srcExp = attr.ngInclude || attr.src, - scopeExp = attr.scope || '', - onloadExp = attr.onload || '', - autoScrollExp = attr.autoscroll; - - return function(scope, element, attr) { - var changeCounter = 0, - childScope; - - function incrementChange() { changeCounter++;} - scope.$watch(srcExp, incrementChange); - scope.$watch(function() { - var includeScope = scope.$eval(scopeExp); - if (includeScope) return includeScope.$id; - }, incrementChange); - scope.$watch(function() {return changeCounter;}, function(newChangeCounter) { - var src = scope.$eval(srcExp), - useScope = scope.$eval(scopeExp); - - function clearContent() { - // if this callback is still desired - if (newChangeCounter === changeCounter) { - if (childScope) childScope.$destroy(); - childScope = null; - element.html(''); - } - } - - if (src) { - $http.get(src, {cache: $templateCache}).success(function(response) { - // if this callback is still desired - if (newChangeCounter === changeCounter) { - element.html(response); - if (childScope) childScope.$destroy(); - childScope = useScope ? useScope : scope.$new(); - $compile(element.contents())(childScope); - if (isDefined(autoScrollExp) && (!autoScrollExp || scope.$eval(autoScrollExp))) { - $anchorScroll(); - } - scope.$emit('$includeContentLoaded'); - scope.$eval(onloadExp); - } - }).error(clearContent); - } else { - clearContent(); - } - }); - }; - } - } -}]; diff --git a/src/directive/ngInit.js b/src/directive/ngInit.js deleted file mode 100644 index cbd1b3ed..00000000 --- a/src/directive/ngInit.js +++ /dev/null @@ -1,37 +0,0 @@ -'use strict'; - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-init - * - * @description - * The `ng-init` attribute specifies initialization tasks to be executed - * before the template enters execution mode during bootstrap. - * - * @element ANY - * @param {expression} ng-init {@link guide/dev_guide.expressions Expression} to eval. - * - * @example - - -

- {{greeting}} {{person}}! -

- - - it('should check greeting', function() { - expect(binding('greeting')).toBe('Hello'); - expect(binding('person')).toBe('World'); - }); - - - */ -var ngInitDirective = ngDirective({ - compile: function() { - return { - pre: function(scope, element, attrs) { - scope.$eval(attrs.ngInit); - } - } - } -}); diff --git a/src/directive/ngNonBindable.js b/src/directive/ngNonBindable.js deleted file mode 100644 index 2e9faa5a..00000000 --- a/src/directive/ngNonBindable.js +++ /dev/null @@ -1,33 +0,0 @@ -'use strict'; - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-non-bindable - * @priority 1000 - * - * @description - * Sometimes it is necessary to write code which looks like bindings but which should be left alone - * by angular. Use `ng-non-bindable` to make angular ignore a chunk of HTML. - * - * @element ANY - * - * @example - * In this example there are two location where a simple binding (`{{}}`) is present, but the one - * wrapped in `ng-non-bindable` is left alone. - * - * @example - - -

Normal: {{1 + 2}}

Ignored: {{1 + 2}}

- - - it('should check ng-non-bindable', function() { - expect(using('.doc-example-live').binding('1 + 2')).toBe('3'); - expect(using('.doc-example-live').element('div:last').text()). - toMatch(/1 \+ 2/); - }); - - - */ -var ngNonBindableDirective = ngDirective({ terminal: true, priority: 1000 }); diff --git a/src/directive/ngPluralize.js b/src/directive/ngPluralize.js deleted file mode 100644 index a8cc40a6..00000000 --- a/src/directive/ngPluralize.js +++ /dev/null @@ -1,204 +0,0 @@ -'use strict'; - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-pluralize - * @restrict EA - * - * @description - * # Overview - * ng-pluralize is a directive that displays messages according to en-US localization rules. - * These rules are bundled with angular.js and the rules can be overridden - * (see {@link guide/dev_guide.i18n Angular i18n} dev guide). You configure ng-pluralize by - * specifying the mappings between - * {@link http://unicode.org/repos/cldr-tmp/trunk/diff/supplemental/language_plural_rules.html - * plural categories} and the strings to be displayed. - * - * # Plural categories and explicit number rules - * There are two - * {@link http://unicode.org/repos/cldr-tmp/trunk/diff/supplemental/language_plural_rules.html - * plural categories} in Angular's default en-US locale: "one" and "other". - * - * While a pural category may match many numbers (for example, in en-US locale, "other" can match - * any number that is not 1), an explicit number rule can only match one number. For example, the - * explicit number rule for "3" matches the number 3. You will see the use of plural categories - * and explicit number rules throughout later parts of this documentation. - * - * # Configuring ng-pluralize - * You configure ng-pluralize by providing 2 attributes: `count` and `when`. - * You can also provide an optional attribute, `offset`. - * - * The value of the `count` attribute can be either a string or an {@link guide/dev_guide.expressions - * Angular expression}; these are evaluated on the current scope for its binded value. - * - * The `when` attribute specifies the mappings between plural categories and the actual - * string to be displayed. The value of the attribute should be a JSON object so that Angular - * can interpret it correctly. - * - * The following example shows how to configure ng-pluralize: - * - *

- * 
- * 
- *

- * - * In the example, `"0: Nobody is viewing."` is an explicit number rule. If you did not - * specify this rule, 0 would be matched to the "other" category and "0 people are viewing" - * would be shown instead of "Nobody is viewing". You can specify an explicit number rule for - * other numbers, for example 12, so that instead of showing "12 people are viewing", you can - * show "a dozen people are viewing". - * - * You can use a set of closed braces(`{}`) as a placeholder for the number that you want substituted - * into pluralized strings. In the previous example, Angular will replace `{}` with - * `{{personCount}}`. The closed braces `{}` is a placeholder - * for {{numberExpression}}. - * - * # Configuring ng-pluralize with offset - * The `offset` attribute allows further customization of pluralized text, which can result in - * a better user experience. For example, instead of the message "4 people are viewing this document", - * you might display "John, Kate and 2 others are viewing this document". - * The offset attribute allows you to offset a number by any desired value. - * Let's take a look at an example: - * - *

- * 
- * 
- *

- * - * Notice that we are still using two plural categories(one, other), but we added - * three explicit number rules 0, 1 and 2. - * When one person, perhaps John, views the document, "John is viewing" will be shown. - * When three people view the document, no explicit number rule is found, so - * an offset of 2 is taken off 3, and Angular uses 1 to decide the plural category. - * In this case, plural category 'one' is matched and "John, Marry and one other person are viewing" - * is shown. - * - * Note that when you specify offsets, you must provide explicit number rules for - * numbers from 0 up to and including the offset. If you use an offset of 3, for example, - * you must provide explicit number rules for 0, 1, 2 and 3. You must also provide plural strings for - * plural categories "one" and "other". - * - * @param {string|expression} count The variable to be bounded to. - * @param {string} when The mapping between plural category to its correspoding strings. - * @param {number=} offset Offset to deduct from the total number. - * - * @example - - - -

- Person 1:
- Person 2:
- Number of People:
- - - Without Offset: - -
- - - With Offset(2): - - -

- - - it('should show correct pluralized string', function() { - expect(element('.doc-example-live ng-pluralize:first').text()). - toBe('1 person is viewing.'); - expect(element('.doc-example-live ng-pluralize:last').text()). - toBe('Igor is viewing.'); - - using('.doc-example-live').input('personCount').enter('0'); - expect(element('.doc-example-live ng-pluralize:first').text()). - toBe('Nobody is viewing.'); - expect(element('.doc-example-live ng-pluralize:last').text()). - toBe('Nobody is viewing.'); - - using('.doc-example-live').input('personCount').enter('2'); - expect(element('.doc-example-live ng-pluralize:first').text()). - toBe('2 people are viewing.'); - expect(element('.doc-example-live ng-pluralize:last').text()). - toBe('Igor and Misko are viewing.'); - - using('.doc-example-live').input('personCount').enter('3'); - expect(element('.doc-example-live ng-pluralize:first').text()). - toBe('3 people are viewing.'); - expect(element('.doc-example-live ng-pluralize:last').text()). - toBe('Igor, Misko and one other person are viewing.'); - - using('.doc-example-live').input('personCount').enter('4'); - expect(element('.doc-example-live ng-pluralize:first').text()). - toBe('4 people are viewing.'); - expect(element('.doc-example-live ng-pluralize:last').text()). - toBe('Igor, Misko and 2 other people are viewing.'); - }); - - it('should show data-binded names', function() { - using('.doc-example-live').input('personCount').enter('4'); - expect(element('.doc-example-live ng-pluralize:last').text()). - toBe('Igor, Misko and 2 other people are viewing.'); - - using('.doc-example-live').input('person1').enter('Di'); - using('.doc-example-live').input('person2').enter('Vojta'); - expect(element('.doc-example-live ng-pluralize:last').text()). - toBe('Di, Vojta and 2 other people are viewing.'); - }); - - - */ -var ngPluralizeDirective = ['$locale', '$interpolate', function($locale, $interpolate) { - var BRACE = /{}/g; - return { - restrict: 'EA', - link: function(scope, element, attr) { - var numberExp = attr.count, - whenExp = element.attr(attr.$attr.when), // this is because we have {{}} in attrs - offset = attr.offset || 0, - whens = scope.$eval(whenExp), - whensExpFns = {}; - - forEach(whens, function(expression, key) { - whensExpFns[key] = - $interpolate(expression.replace(BRACE, '{{' + numberExp + '-' + offset + '}}')); - }); - - scope.$watch(function() { - var value = parseFloat(scope.$eval(numberExp)); - - if (!isNaN(value)) { - //if explicit number rule such as 1, 2, 3... is defined, just use it. Otherwise, - //check it against pluralization rules in $locale service - if (!whens[value]) value = $locale.pluralCat(value - offset); - return whensExpFns[value](scope, element, true); - } else { - return ''; - } - }, function(newVal) { - element.text(newVal); - }); - } - }; -}]; diff --git a/src/directive/ngRepeat.js b/src/directive/ngRepeat.js deleted file mode 100644 index 82f8b9c7..00000000 --- a/src/directive/ngRepeat.js +++ /dev/null @@ -1,181 +0,0 @@ -'use strict'; - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-repeat - * - * @description - * The `ng-repeat` directive instantiates a template once per item from a collection. Each template - * instance gets its own scope, where the given loop variable is set to the current collection item, - * and `$index` is set to the item index or key. - * - * Special properties are exposed on the local scope of each template instance, including: - * - * * `$index` – `{number}` – iterator offset of the repeated element (0..length-1) - * * `$position` – `{string}` – position of the repeated element in the iterator. One of: - * * `'first'`, - * * `'middle'` - * * `'last'` - * - * - * @element ANY - * @scope - * @priority 1000 - * @param {repeat_expression} ng-repeat The expression indicating how to enumerate a collection. Two - * formats are currently supported: - * - * * `variable in expression` – where variable is the user defined loop variable and `expression` - * is a scope expression giving the collection to enumerate. - * - * For example: `track in cd.tracks`. - * - * * `(key, value) in expression` – where `key` and `value` can be any user defined identifiers, - * and `expression` is the scope expression giving the collection to enumerate. - * - * For example: `(name, age) in {'adam':10, 'amalie':12}`. - * - * @example - * This example initializes the scope to a list of names and - * then uses `ng-repeat` to display every person: - - -

- I have {{friends.length}} friends. They are: -

- [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old. -

- - - it('should check ng-repeat', function() { - var r = using('.doc-example-live').repeater('ul li'); - expect(r.count()).toBe(2); - expect(r.row(0)).toEqual(["1","John","25"]); - expect(r.row(1)).toEqual(["2","Mary","28"]); - }); - - - */ -var ngRepeatDirective = ngDirective({ - transclude: 'element', - priority: 1000, - terminal: true, - compile: function(element, attr, linker) { - return function(scope, iterStartElement, attr){ - var expression = attr.ngRepeat; - var match = expression.match(/^\s*(.+)\s+in\s+(.*)\s*$/), - lhs, rhs, valueIdent, keyIdent; - if (! match) { - throw Error("Expected ng-repeat in form of '_item_ in _collection_' but got '" + - expression + "'."); - } - lhs = match[1]; - rhs = match[2]; - match = lhs.match(/^(?:([\$\w]+)|$([\$\w]+)\s*,\s*([\$\w]+)$)$/); - if (!match) { - throw Error("'item' in 'item in collection' should be identifier or (key, value) but got '" + - lhs + "'."); - } - valueIdent = match[3] || match[1]; - keyIdent = match[2]; - - // Store a list of elements from previous run. This is a hash where key is the item from the - // iterator, and the value is an array of objects with following properties. - // - scope: bound scope - // - element: previous element. - // - index: position - // We need an array of these objects since the same object can be returned from the iterator. - // We expect this to be a rare case. - var lastOrder = new HashQueueMap(); - scope.$watch(function(scope){ - var index, length, - collection = scope.$eval(rhs), - collectionLength = size(collection, true), - childScope, - // Same as lastOrder but it has the current state. It will become the - // lastOrder on the next iteration. - nextOrder = new HashQueueMap(), - key, value, // key/value of iteration - array, last, // last object information {scope, element, index} - cursor = iterStartElement; // current position of the node - - if (!isArray(collection)) { - // if object, extract keys, sort them and use to determine order of iteration over obj props - array = []; - for(key in collection) { - if (collection.hasOwnProperty(key) && key.charAt(0) != '$') { - array.push(key); - } - } - array.sort(); - } else { - array = collection || []; - } - - // we are not using forEach for perf reasons (trying to avoid #call) - for (index = 0, length = array.length; index < length; index++) { - key = (collection === array) ? index : array[index]; - value = collection[key]; - last = lastOrder.shift(value); - if (last) { - // if we have already seen this object, then we need to reuse the - // associated scope/element - childScope = last.scope; - nextOrder.push(value, last); - - if (index === last.index) { - // do nothing - cursor = last.element; - } else { - // existing item which got moved - last.index = index; - // This may be a noop, if the element is next, but I don't know of a good way to - // figure this out, since it would require extra DOM access, so let's just hope that - // the browsers realizes that it is noop, and treats it as such. - cursor.after(last.element); - cursor = last.element; - } - } else { - // new item which we don't know about - childScope = scope.$new(); - } - - childScope[valueIdent] = value; - if (keyIdent) childScope[keyIdent] = key; - childScope.$index = index; - childScope.$position = index === 0 ? - 'first' : - (index == collectionLength - 1 ? 'last' : 'middle'); - - if (!last) { - linker(childScope, function(clone){ - cursor.after(clone); - last = { - scope: childScope, - element: (cursor = clone), - index: index - }; - nextOrder.push(value, last); - }); - } - } - - //shrink children - for (key in lastOrder) { - if (lastOrder.hasOwnProperty(key)) { - array = lastOrder[key]; - while(array.length) { - value = array.pop(); - value.element.remove(); - value.scope.$destroy(); - } - } - } - - lastOrder = nextOrder; - }); - }; - } -}); diff --git a/src/directive/ngShowHide.js b/src/directive/ngShowHide.js deleted file mode 100644 index 40a8a68e..00000000 --- a/src/directive/ngShowHide.js +++ /dev/null @@ -1,80 +0,0 @@ -'use strict'; - -/** - * @ngdoc directive - * @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) - * conditionally. - * - * @element ANY - * @param {expression} ng-show If the {@link guide/dev_guide.expressions expression} is truthy - * then the element is shown or hidden respectively. - * - * @example - - - Click me:
- Show: I show up when your checkbox is checked.
- Hide: I hide when your checkbox is checked. - - - it('should check ng-show / ng-hide', function() { - expect(element('.doc-example-live span:first:hidden').count()).toEqual(1); - expect(element('.doc-example-live span:last:visible').count()).toEqual(1); - - input('checked').check(); - - expect(element('.doc-example-live span:first:visible').count()).toEqual(1); - expect(element('.doc-example-live span:last:hidden').count()).toEqual(1); - }); - - - */ -//TODO(misko): refactor to remove element from the DOM -var ngShowDirective = ngDirective(function(scope, element, attr){ - scope.$watch(attr.ngShow, function(value){ - element.css('display', toBoolean(value) ? '' : 'none'); - }); -}); - - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-hide - * - * @description - * The `ng-hide` and `ng-show` directives hide or show a portion - * of the HTML conditionally. - * - * @element ANY - * @param {expression} ng-hide If the {@link guide/dev_guide.expressions expression} truthy then - * the element is shown or hidden respectively. - * - * @example - - - Click me:
- Show: I show up when you checkbox is checked?
- Hide: I hide when you checkbox is checked? - - - it('should check ng-show / ng-hide', function() { - expect(element('.doc-example-live span:first:hidden').count()).toEqual(1); - expect(element('.doc-example-live span:last:visible').count()).toEqual(1); - - input('checked').check(); - - expect(element('.doc-example-live span:first:visible').count()).toEqual(1); - expect(element('.doc-example-live span:last:hidden').count()).toEqual(1); - }); - - - */ -//TODO(misko): refactor to remove element from the DOM -var ngHideDirective = ngDirective(function(scope, element, attr){ - scope.$watch(attr.ngHide, function(value){ - element.css('display', toBoolean(value) ? 'none' : ''); - }); -}); diff --git a/src/directive/ngStyle.js b/src/directive/ngStyle.js deleted file mode 100644 index 8a4e7458..00000000 --- a/src/directive/ngStyle.js +++ /dev/null @@ -1,42 +0,0 @@ -'use strict'; - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-style - * - * @description - * The ng-style allows you to set CSS style on an HTML element conditionally. - * - * @element ANY - * @param {expression} ng-style {@link guide/dev_guide.expressions Expression} which evals to an - * object whose keys are CSS style names and values are corresponding values for those CSS - * keys. - * - * @example - - - - -
- Sample Text -

myStyle={{myStyle}}

- - - it('should check ng-style', function() { - expect(element('.doc-example-live span').css('color')).toBe('rgb(0, 0, 0)'); - element('.doc-example-live :button[value=set]').click(); - expect(element('.doc-example-live span').css('color')).toBe('rgb(255, 0, 0)'); - element('.doc-example-live :button[value=clear]').click(); - expect(element('.doc-example-live span').css('color')).toBe('rgb(0, 0, 0)'); - }); - - - */ -var ngStyleDirective = ngDirective(function(scope, element, attr) { - scope.$watch(attr.ngStyle, function(newStyles, oldStyles) { - if (oldStyles && (newStyles !== oldStyles)) { - forEach(oldStyles, function(val, style) { element.css(style, '');}); - } - if (newStyles) element.css(newStyles); - }, true); -}); diff --git a/src/directive/ngSwitch.js b/src/directive/ngSwitch.js deleted file mode 100644 index 16b0c4d4..00000000 --- a/src/directive/ngSwitch.js +++ /dev/null @@ -1,112 +0,0 @@ -'use strict'; - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-switch - * @restrict EA - * - * @description - * Conditionally change the DOM structure. - * - * @usageContent - * ... - * ... - * ... - * ... - * - * @scope - * @param {*} ng-switch|on expression to match against ng-switch-when. - * @paramDescription - * On child elments add: - * - * * `ng-switch-when`: the case statement to match against. If match then this - * case will be displayed. - * * `ng-switch-default`: the default case when no other casses match. - * - * @example - - - -

- - selection={{selection}} -

Settings Div

- Home Span - default -

- - - it('should start in settings', function() { - expect(element('.doc-example-live [ng-switch]').text()).toMatch(/Settings Div/); - }); - it('should change to home', function() { - select('selection').option('home'); - expect(element('.doc-example-live [ng-switch]').text()).toMatch(/Home Span/); - }); - it('should select deafault', function() { - select('selection').option('other'); - expect(element('.doc-example-live [ng-switch]').text()).toMatch(/default/); - }); - - - */ -var NG_SWITCH = 'ng-switch'; -var ngSwitchDirective = valueFn({ - restrict: 'EA', - compile: function(element, attr) { - var watchExpr = attr.ngSwitch || attr.on, - cases = {}; - - element.data(NG_SWITCH, cases); - return function(scope, element){ - var selectedTransclude, - selectedElement, - selectedScope; - - scope.$watch(watchExpr, function(value) { - if (selectedElement) { - selectedScope.$destroy(); - selectedElement.remove(); - selectedElement = selectedScope = null; - } - if ((selectedTransclude = cases['!' + value] || cases['?'])) { - scope.$eval(attr.change); - selectedScope = scope.$new(); - selectedTransclude(selectedScope, function(caseElement) { - selectedElement = caseElement; - element.append(caseElement); - }); - } - }); - }; - } -}); - -var ngSwitchWhenDirective = ngDirective({ - transclude: 'element', - priority: 500, - compile: function(element, attrs, transclude) { - var cases = element.inheritedData(NG_SWITCH); - assertArg(cases); - cases['!' + attrs.ngSwitchWhen] = transclude; - } -}); - -var ngSwitchDefaultDirective = ngDirective({ - transclude: 'element', - priority: 500, - compile: function(element, attrs, transclude) { - var cases = element.inheritedData(NG_SWITCH); - assertArg(cases); - cases['?'] = transclude; - } -}); diff --git a/src/directive/ngTransclude.js b/src/directive/ngTransclude.js deleted file mode 100644 index ab4011f0..00000000 --- a/src/directive/ngTransclude.js +++ /dev/null @@ -1,58 +0,0 @@ -'use strict'; - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-transclude - * - * @description - * Insert the transcluded DOM here. - * - * @element ANY - * - * @example - - - -

-
-
- {{text}} -

- - - it('should have transcluded', function() { - input('title').enter('TITLE'); - input('text').enter('TEXT'); - expect(binding('title')).toEqual('TITLE'); - expect(binding('text')).toEqual('TEXT'); - }); - - - * - */ -var ngTranscludeDirective = ngDirective({ - controller: ['$transclude', '$element', function($transclude, $element) { - $transclude(function(clone) { - $element.append(clone); - }); - }] -}); diff --git a/src/directive/ngView.js b/src/directive/ngView.js deleted file mode 100644 index 95b1546d..00000000 --- a/src/directive/ngView.js +++ /dev/null @@ -1,170 +0,0 @@ -'use strict'; - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.ng-view - * @restrict ECA - * - * @description - * # Overview - * `ng-view` is a directive that complements the {@link angular.module.ng.$route $route} service by - * including the rendered template of the current route into the main layout (`index.html`) file. - * Every time the current route changes, the included view changes with it according to the - * configuration of the `$route` service. - * - * @scope - * @example - - - - - - - - -

- Choose: - Moby | - Moby: Ch1 | - Gatsby | - Gatsby: Ch4 | - Scarlet Letter
- -

- -

$location.path() = {{$location.path()}}

$route.current.template = {{$route.current.template}}

$route.current.params = {{$route.current.params}}

$route.current.scope.name = {{$route.current.scope.name}}

$routeParams = {{$routeParams}}

- - - it('should load and compile correct template', function() { - element('a:contains("Moby: Ch1")').click(); - var content = element('.doc-example-live [ng-view]').text(); - expect(content).toMatch(/controller\: ChapterCntl/); - expect(content).toMatch(/Book Id\: Moby/); - expect(content).toMatch(/Chapter Id\: 1/); - - element('a:contains("Scarlet")').click(); - content = element('.doc-example-live [ng-view]').text(); - expect(content).toMatch(/controller\: BookCntl/); - expect(content).toMatch(/Book Id\: Scarlet/); - }); - - - */ - - -/** - * @ngdoc event - * @name angular.module.ng.$compileProvider.directive.ng-view#$viewContentLoaded - * @eventOf angular.module.ng.$compileProvider.directive.ng-view - * @eventType emit on the current ng-view scope - * @description - * Emitted every time the ng-view content is reloaded. - */ -var ngViewDirective = ['$http', '$templateCache', '$route', '$anchorScroll', '$compile', - '$controller', - function($http, $templateCache, $route, $anchorScroll, $compile, - $controller) { - return { - restrict: 'ECA', - terminal: true, - link: function(scope, element, attr) { - var changeCounter = 0, - lastScope, - onloadExp = attr.onload || ''; - - scope.$on('$afterRouteChange', function(event, next, previous) { - changeCounter++; - }); - - scope.$watch(function() {return changeCounter;}, function(newChangeCounter) { - var template = $route.current && $route.current.template; - - function destroyLastScope() { - if (lastScope) { - lastScope.$destroy(); - lastScope = null; - } - } - - function clearContent() { - // ignore callback if another route change occured since - if (newChangeCounter == changeCounter) { - element.html(''); - } - destroyLastScope(); - } - - if (template) { - $http.get(template, {cache: $templateCache}).success(function(response) { - // ignore callback if another route change occured since - if (newChangeCounter == changeCounter) { - element.html(response); - destroyLastScope(); - - var link = $compile(element.contents()), - current = $route.current; - - lastScope = current.scope = scope.$new(); - if (current.controller) { - element.contents(). - data('$ngControllerController', $controller(current.controller, {$scope: lastScope})); - } - - link(lastScope); - lastScope.$emit('$viewContentLoaded'); - lastScope.$eval(onloadExp); - - // $anchorScroll might listen on event... - $anchorScroll(); - } - }).error(clearContent); - } else { - clearContent(); - } - }); - } - }; -}]; diff --git a/src/directive/script.js b/src/directive/script.js deleted file mode 100644 index 4090ae24..00000000 --- a/src/directive/script.js +++ /dev/null @@ -1,43 +0,0 @@ -'use strict'; - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.script - * - * @description - * Load content of a script tag, with type `text/ng-template`, into `$templateCache`, so that the - * template can be used by `ng-include`, `ng-view` or directive templates. - * - * @restrict E - * @param {'text/ng-template'} type must be set to `'text/ng-template'` - * - * @example - - - - - Load inlined template -

- - - it('should load template defined inside script tag', function() { - element('#tpl-link').click(); - expect(element('#tpl-content').text()).toMatch(/Content of the template/); - }); - - - */ -var scriptDirective = ['$templateCache', function($templateCache) { - return { - restrict: 'E', - terminal: true, - compile: function(element, attr) { - if (attr.type == 'text/ng-template') { - var templateUrl = attr.id; - $templateCache.put(templateUrl, element.text()); - } - } - }; -}]; diff --git a/src/directive/select.js b/src/directive/select.js deleted file mode 100644 index b70339fc..00000000 --- a/src/directive/select.js +++ /dev/null @@ -1,449 +0,0 @@ -'use strict'; - -/** - * @ngdoc directive - * @name angular.module.ng.$compileProvider.directive.select - * @restrict E - * - * @description - * HTML `SELECT` element with angular data-binding. - * - * # `ng-options` - * - * Optionally `ng-options` attribute can be used to dynamically generate a list of `