(js) Add missing vendor libs
angular-file-upload (angularFileUpload) and angular-messages (ngMessages).pull/201/head
Francis Lachapelle
parent
a2e300fec5
commit
044e426d22
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,685 @@
|
|||
/**
|
||||
* @license AngularJS v1.4.9
|
||||
* (c) 2010-2015 Google, Inc. http://angularjs.org
|
||||
* License: MIT
|
||||
*/
|
||||
(function(window, angular, undefined) {'use strict';
|
||||
|
||||
/* jshint ignore:start */
|
||||
// this code is in the core, but not in angular-messages.js
|
||||
var isArray = angular.isArray;
|
||||
var forEach = angular.forEach;
|
||||
var isString = angular.isString;
|
||||
var jqLite = angular.element;
|
||||
/* jshint ignore:end */
|
||||
|
||||
/**
|
||||
* @ngdoc module
|
||||
* @name ngMessages
|
||||
* @description
|
||||
*
|
||||
* The `ngMessages` module provides enhanced support for displaying messages within templates
|
||||
* (typically within forms or when rendering message objects that return key/value data).
|
||||
* Instead of relying on JavaScript code and/or complex ng-if statements within your form template to
|
||||
* show and hide error messages specific to the state of an input field, the `ngMessages` and
|
||||
* `ngMessage` directives are designed to handle the complexity, inheritance and priority
|
||||
* sequencing based on the order of how the messages are defined in the template.
|
||||
*
|
||||
* Currently, the ngMessages module only contains the code for the `ngMessages`, `ngMessagesInclude`
|
||||
* `ngMessage` and `ngMessageExp` directives.
|
||||
*
|
||||
* # Usage
|
||||
* The `ngMessages` directive listens on a key/value collection which is set on the ngMessages attribute.
|
||||
* Since the {@link ngModel ngModel} directive exposes an `$error` object, this error object can be
|
||||
* used with `ngMessages` to display control error messages in an easier way than with just regular angular
|
||||
* template directives.
|
||||
*
|
||||
* ```html
|
||||
* <form name="myForm">
|
||||
* <label>
|
||||
* Enter text:
|
||||
* <input type="text" ng-model="field" name="myField" required minlength="5" />
|
||||
* </label>
|
||||
* <div ng-messages="myForm.myField.$error" role="alert">
|
||||
* <div ng-message="required">You did not enter a field</div>
|
||||
* <div ng-message="minlength, maxlength">
|
||||
* Your email must be between 5 and 100 characters long
|
||||
* </div>
|
||||
* </div>
|
||||
* </form>
|
||||
* ```
|
||||
*
|
||||
* Now whatever key/value entries are present within the provided object (in this case `$error`) then
|
||||
* the ngMessages directive will render the inner first ngMessage directive (depending if the key values
|
||||
* match the attribute value present on each ngMessage directive). In other words, if your errors
|
||||
* object contains the following data:
|
||||
*
|
||||
* ```javascript
|
||||
* <!-- keep in mind that ngModel automatically sets these error flags -->
|
||||
* myField.$error = { minlength : true, required : true };
|
||||
* ```
|
||||
*
|
||||
* Then the `required` message will be displayed first. When required is false then the `minlength` message
|
||||
* will be displayed right after (since these messages are ordered this way in the template HTML code).
|
||||
* The prioritization of each message is determined by what order they're present in the DOM.
|
||||
* Therefore, instead of having custom JavaScript code determine the priority of what errors are
|
||||
* present before others, the presentation of the errors are handled within the template.
|
||||
*
|
||||
* By default, ngMessages will only display one error at a time. However, if you wish to display all
|
||||
* messages then the `ng-messages-multiple` attribute flag can be used on the element containing the
|
||||
* ngMessages directive to make this happen.
|
||||
*
|
||||
* ```html
|
||||
* <!-- attribute-style usage -->
|
||||
* <div ng-messages="myForm.myField.$error" ng-messages-multiple>...</div>
|
||||
*
|
||||
* <!-- element-style usage -->
|
||||
* <ng-messages for="myForm.myField.$error" multiple>...</ng-messages>
|
||||
* ```
|
||||
*
|
||||
* ## Reusing and Overriding Messages
|
||||
* In addition to prioritization, ngMessages also allows for including messages from a remote or an inline
|
||||
* template. This allows for generic collection of messages to be reused across multiple parts of an
|
||||
* application.
|
||||
*
|
||||
* ```html
|
||||
* <script type="text/ng-template" id="error-messages">
|
||||
* <div ng-message="required">This field is required</div>
|
||||
* <div ng-message="minlength">This field is too short</div>
|
||||
* </script>
|
||||
*
|
||||
* <div ng-messages="myForm.myField.$error" role="alert">
|
||||
* <div ng-messages-include="error-messages"></div>
|
||||
* </div>
|
||||
* ```
|
||||
*
|
||||
* However, including generic messages may not be useful enough to match all input fields, therefore,
|
||||
* `ngMessages` provides the ability to override messages defined in the remote template by redefining
|
||||
* them within the directive container.
|
||||
*
|
||||
* ```html
|
||||
* <!-- a generic template of error messages known as "my-custom-messages" -->
|
||||
* <script type="text/ng-template" id="my-custom-messages">
|
||||
* <div ng-message="required">This field is required</div>
|
||||
* <div ng-message="minlength">This field is too short</div>
|
||||
* </script>
|
||||
*
|
||||
* <form name="myForm">
|
||||
* <label>
|
||||
* Email address
|
||||
* <input type="email"
|
||||
* id="email"
|
||||
* name="myEmail"
|
||||
* ng-model="email"
|
||||
* minlength="5"
|
||||
* required />
|
||||
* </label>
|
||||
* <!-- any ng-message elements that appear BEFORE the ng-messages-include will
|
||||
* override the messages present in the ng-messages-include template -->
|
||||
* <div ng-messages="myForm.myEmail.$error" role="alert">
|
||||
* <!-- this required message has overridden the template message -->
|
||||
* <div ng-message="required">You did not enter your email address</div>
|
||||
*
|
||||
* <!-- this is a brand new message and will appear last in the prioritization -->
|
||||
* <div ng-message="email">Your email address is invalid</div>
|
||||
*
|
||||
* <!-- and here are the generic error messages -->
|
||||
* <div ng-messages-include="my-custom-messages"></div>
|
||||
* </div>
|
||||
* </form>
|
||||
* ```
|
||||
*
|
||||
* In the example HTML code above the message that is set on required will override the corresponding
|
||||
* required message defined within the remote template. Therefore, with particular input fields (such
|
||||
* email addresses, date fields, autocomplete inputs, etc...), specialized error messages can be applied
|
||||
* while more generic messages can be used to handle other, more general input errors.
|
||||
*
|
||||
* ## Dynamic Messaging
|
||||
* ngMessages also supports using expressions to dynamically change key values. Using arrays and
|
||||
* repeaters to list messages is also supported. This means that the code below will be able to
|
||||
* fully adapt itself and display the appropriate message when any of the expression data changes:
|
||||
*
|
||||
* ```html
|
||||
* <form name="myForm">
|
||||
* <label>
|
||||
* Email address
|
||||
* <input type="email"
|
||||
* name="myEmail"
|
||||
* ng-model="email"
|
||||
* minlength="5"
|
||||
* required />
|
||||
* </label>
|
||||
* <div ng-messages="myForm.myEmail.$error" role="alert">
|
||||
* <div ng-message="required">You did not enter your email address</div>
|
||||
* <div ng-repeat="errorMessage in errorMessages">
|
||||
* <!-- use ng-message-exp for a message whose key is given by an expression -->
|
||||
* <div ng-message-exp="errorMessage.type">{{ errorMessage.text }}</div>
|
||||
* </div>
|
||||
* </div>
|
||||
* </form>
|
||||
* ```
|
||||
*
|
||||
* The `errorMessage.type` expression can be a string value or it can be an array so
|
||||
* that multiple errors can be associated with a single error message:
|
||||
*
|
||||
* ```html
|
||||
* <label>
|
||||
* Email address
|
||||
* <input type="email"
|
||||
* ng-model="data.email"
|
||||
* name="myEmail"
|
||||
* ng-minlength="5"
|
||||
* ng-maxlength="100"
|
||||
* required />
|
||||
* </label>
|
||||
* <div ng-messages="myForm.myEmail.$error" role="alert">
|
||||
* <div ng-message-exp="'required'">You did not enter your email address</div>
|
||||
* <div ng-message-exp="['minlength', 'maxlength']">
|
||||
* Your email must be between 5 and 100 characters long
|
||||
* </div>
|
||||
* </div>
|
||||
* ```
|
||||
*
|
||||
* Feel free to use other structural directives such as ng-if and ng-switch to further control
|
||||
* what messages are active and when. Be careful, if you place ng-message on the same element
|
||||
* as these structural directives, Angular may not be able to determine if a message is active
|
||||
* or not. Therefore it is best to place the ng-message on a child element of the structural
|
||||
* directive.
|
||||
*
|
||||
* ```html
|
||||
* <div ng-messages="myForm.myEmail.$error" role="alert">
|
||||
* <div ng-if="showRequiredError">
|
||||
* <div ng-message="required">Please enter something</div>
|
||||
* </div>
|
||||
* </div>
|
||||
* ```
|
||||
*
|
||||
* ## Animations
|
||||
* If the `ngAnimate` module is active within the application then the `ngMessages`, `ngMessage` and
|
||||
* `ngMessageExp` directives will trigger animations whenever any messages are added and removed from
|
||||
* the DOM by the `ngMessages` directive.
|
||||
*
|
||||
* Whenever the `ngMessages` directive contains one or more visible messages then the `.ng-active` CSS
|
||||
* class will be added to the element. The `.ng-inactive` CSS class will be applied when there are no
|
||||
* messages present. Therefore, CSS transitions and keyframes as well as JavaScript animations can
|
||||
* hook into the animations whenever these classes are added/removed.
|
||||
*
|
||||
* Let's say that our HTML code for our messages container looks like so:
|
||||
*
|
||||
* ```html
|
||||
* <div ng-messages="myMessages" class="my-messages" role="alert">
|
||||
* <div ng-message="alert" class="some-message">...</div>
|
||||
* <div ng-message="fail" class="some-message">...</div>
|
||||
* </div>
|
||||
* ```
|
||||
*
|
||||
* Then the CSS animation code for the message container looks like so:
|
||||
*
|
||||
* ```css
|
||||
* .my-messages {
|
||||
* transition:1s linear all;
|
||||
* }
|
||||
* .my-messages.ng-active {
|
||||
* // messages are visible
|
||||
* }
|
||||
* .my-messages.ng-inactive {
|
||||
* // messages are hidden
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* Whenever an inner message is attached (becomes visible) or removed (becomes hidden) then the enter
|
||||
* and leave animation is triggered for each particular element bound to the `ngMessage` directive.
|
||||
*
|
||||
* Therefore, the CSS code for the inner messages looks like so:
|
||||
*
|
||||
* ```css
|
||||
* .some-message {
|
||||
* transition:1s linear all;
|
||||
* }
|
||||
*
|
||||
* .some-message.ng-enter {}
|
||||
* .some-message.ng-enter.ng-enter-active {}
|
||||
*
|
||||
* .some-message.ng-leave {}
|
||||
* .some-message.ng-leave.ng-leave-active {}
|
||||
* ```
|
||||
*
|
||||
* {@link ngAnimate Click here} to learn how to use JavaScript animations or to learn more about ngAnimate.
|
||||
*/
|
||||
angular.module('ngMessages', [])
|
||||
|
||||
/**
|
||||
* @ngdoc directive
|
||||
* @module ngMessages
|
||||
* @name ngMessages
|
||||
* @restrict AE
|
||||
*
|
||||
* @description
|
||||
* `ngMessages` is a directive that is designed to show and hide messages based on the state
|
||||
* of a key/value object that it listens on. The directive itself complements error message
|
||||
* reporting with the `ngModel` $error object (which stores a key/value state of validation errors).
|
||||
*
|
||||
* `ngMessages` manages the state of internal messages within its container element. The internal
|
||||
* messages use the `ngMessage` directive and will be inserted/removed from the page depending
|
||||
* on if they're present within the key/value object. By default, only one message will be displayed
|
||||
* at a time and this depends on the prioritization of the messages within the template. (This can
|
||||
* be changed by using the `ng-messages-multiple` or `multiple` attribute on the directive container.)
|
||||
*
|
||||
* A remote template can also be used to promote message reusability and messages can also be
|
||||
* overridden.
|
||||
*
|
||||
* {@link module:ngMessages Click here} to learn more about `ngMessages` and `ngMessage`.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <!-- using attribute directives -->
|
||||
* <ANY ng-messages="expression" role="alert">
|
||||
* <ANY ng-message="stringValue">...</ANY>
|
||||
* <ANY ng-message="stringValue1, stringValue2, ...">...</ANY>
|
||||
* <ANY ng-message-exp="expressionValue">...</ANY>
|
||||
* </ANY>
|
||||
*
|
||||
* <!-- or by using element directives -->
|
||||
* <ng-messages for="expression" role="alert">
|
||||
* <ng-message when="stringValue">...</ng-message>
|
||||
* <ng-message when="stringValue1, stringValue2, ...">...</ng-message>
|
||||
* <ng-message when-exp="expressionValue">...</ng-message>
|
||||
* </ng-messages>
|
||||
* ```
|
||||
*
|
||||
* @param {string} ngMessages an angular expression evaluating to a key/value object
|
||||
* (this is typically the $error object on an ngModel instance).
|
||||
* @param {string=} ngMessagesMultiple|multiple when set, all messages will be displayed with true
|
||||
*
|
||||
* @example
|
||||
* <example name="ngMessages-directive" module="ngMessagesExample"
|
||||
* deps="angular-messages.js"
|
||||
* animations="true" fixBase="true">
|
||||
* <file name="index.html">
|
||||
* <form name="myForm">
|
||||
* <label>
|
||||
* Enter your name:
|
||||
* <input type="text"
|
||||
* name="myName"
|
||||
* ng-model="name"
|
||||
* ng-minlength="5"
|
||||
* ng-maxlength="20"
|
||||
* required />
|
||||
* </label>
|
||||
* <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
|
||||
*
|
||||
* <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
|
||||
* <div ng-message="required">You did not enter a field</div>
|
||||
* <div ng-message="minlength">Your field is too short</div>
|
||||
* <div ng-message="maxlength">Your field is too long</div>
|
||||
* </div>
|
||||
* </form>
|
||||
* </file>
|
||||
* <file name="script.js">
|
||||
* angular.module('ngMessagesExample', ['ngMessages']);
|
||||
* </file>
|
||||
* </example>
|
||||
*/
|
||||
.directive('ngMessages', ['$animate', function($animate) {
|
||||
var ACTIVE_CLASS = 'ng-active';
|
||||
var INACTIVE_CLASS = 'ng-inactive';
|
||||
|
||||
return {
|
||||
require: 'ngMessages',
|
||||
restrict: 'AE',
|
||||
controller: ['$element', '$scope', '$attrs', function($element, $scope, $attrs) {
|
||||
var ctrl = this;
|
||||
var latestKey = 0;
|
||||
var nextAttachId = 0;
|
||||
|
||||
this.getAttachId = function getAttachId() { return nextAttachId++; };
|
||||
|
||||
var messages = this.messages = {};
|
||||
var renderLater, cachedCollection;
|
||||
|
||||
this.render = function(collection) {
|
||||
collection = collection || {};
|
||||
|
||||
renderLater = false;
|
||||
cachedCollection = collection;
|
||||
|
||||
// this is true if the attribute is empty or if the attribute value is truthy
|
||||
var multiple = isAttrTruthy($scope, $attrs.ngMessagesMultiple) ||
|
||||
isAttrTruthy($scope, $attrs.multiple);
|
||||
|
||||
var unmatchedMessages = [];
|
||||
var matchedKeys = {};
|
||||
var messageItem = ctrl.head;
|
||||
var messageFound = false;
|
||||
var totalMessages = 0;
|
||||
|
||||
// we use != instead of !== to allow for both undefined and null values
|
||||
while (messageItem != null) {
|
||||
totalMessages++;
|
||||
var messageCtrl = messageItem.message;
|
||||
|
||||
var messageUsed = false;
|
||||
if (!messageFound) {
|
||||
forEach(collection, function(value, key) {
|
||||
if (!messageUsed && truthy(value) && messageCtrl.test(key)) {
|
||||
// this is to prevent the same error name from showing up twice
|
||||
if (matchedKeys[key]) return;
|
||||
matchedKeys[key] = true;
|
||||
|
||||
messageUsed = true;
|
||||
messageCtrl.attach();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (messageUsed) {
|
||||
// unless we want to display multiple messages then we should
|
||||
// set a flag here to avoid displaying the next message in the list
|
||||
messageFound = !multiple;
|
||||
} else {
|
||||
unmatchedMessages.push(messageCtrl);
|
||||
}
|
||||
|
||||
messageItem = messageItem.next;
|
||||
}
|
||||
|
||||
forEach(unmatchedMessages, function(messageCtrl) {
|
||||
messageCtrl.detach();
|
||||
});
|
||||
|
||||
unmatchedMessages.length !== totalMessages
|
||||
? $animate.setClass($element, ACTIVE_CLASS, INACTIVE_CLASS)
|
||||
: $animate.setClass($element, INACTIVE_CLASS, ACTIVE_CLASS);
|
||||
};
|
||||
|
||||
$scope.$watchCollection($attrs.ngMessages || $attrs['for'], ctrl.render);
|
||||
|
||||
this.reRender = function() {
|
||||
if (!renderLater) {
|
||||
renderLater = true;
|
||||
$scope.$evalAsync(function() {
|
||||
if (renderLater) {
|
||||
cachedCollection && ctrl.render(cachedCollection);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
this.register = function(comment, messageCtrl) {
|
||||
var nextKey = latestKey.toString();
|
||||
messages[nextKey] = {
|
||||
message: messageCtrl
|
||||
};
|
||||
insertMessageNode($element[0], comment, nextKey);
|
||||
comment.$$ngMessageNode = nextKey;
|
||||
latestKey++;
|
||||
|
||||
ctrl.reRender();
|
||||
};
|
||||
|
||||
this.deregister = function(comment) {
|
||||
var key = comment.$$ngMessageNode;
|
||||
delete comment.$$ngMessageNode;
|
||||
removeMessageNode($element[0], comment, key);
|
||||
delete messages[key];
|
||||
ctrl.reRender();
|
||||
};
|
||||
|
||||
function findPreviousMessage(parent, comment) {
|
||||
var prevNode = comment;
|
||||
var parentLookup = [];
|
||||
while (prevNode && prevNode !== parent) {
|
||||
var prevKey = prevNode.$$ngMessageNode;
|
||||
if (prevKey && prevKey.length) {
|
||||
return messages[prevKey];
|
||||
}
|
||||
|
||||
// dive deeper into the DOM and examine its children for any ngMessage
|
||||
// comments that may be in an element that appears deeper in the list
|
||||
if (prevNode.childNodes.length && parentLookup.indexOf(prevNode) == -1) {
|
||||
parentLookup.push(prevNode);
|
||||
prevNode = prevNode.childNodes[prevNode.childNodes.length - 1];
|
||||
} else {
|
||||
prevNode = prevNode.previousSibling || prevNode.parentNode;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function insertMessageNode(parent, comment, key) {
|
||||
var messageNode = messages[key];
|
||||
if (!ctrl.head) {
|
||||
ctrl.head = messageNode;
|
||||
} else {
|
||||
var match = findPreviousMessage(parent, comment);
|
||||
if (match) {
|
||||
messageNode.next = match.next;
|
||||
match.next = messageNode;
|
||||
} else {
|
||||
messageNode.next = ctrl.head;
|
||||
ctrl.head = messageNode;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function removeMessageNode(parent, comment, key) {
|
||||
var messageNode = messages[key];
|
||||
|
||||
var match = findPreviousMessage(parent, comment);
|
||||
if (match) {
|
||||
match.next = messageNode.next;
|
||||
} else {
|
||||
ctrl.head = messageNode.next;
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
function isAttrTruthy(scope, attr) {
|
||||
return (isString(attr) && attr.length === 0) || //empty attribute
|
||||
truthy(scope.$eval(attr));
|
||||
}
|
||||
|
||||
function truthy(val) {
|
||||
return isString(val) ? val.length : !!val;
|
||||
}
|
||||
}])
|
||||
|
||||
/**
|
||||
* @ngdoc directive
|
||||
* @name ngMessagesInclude
|
||||
* @restrict AE
|
||||
* @scope
|
||||
*
|
||||
* @description
|
||||
* `ngMessagesInclude` is a directive with the purpose to import existing ngMessage template
|
||||
* code from a remote template and place the downloaded template code into the exact spot
|
||||
* that the ngMessagesInclude directive is placed within the ngMessages container. This allows
|
||||
* for a series of pre-defined messages to be reused and also allows for the developer to
|
||||
* determine what messages are overridden due to the placement of the ngMessagesInclude directive.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <!-- using attribute directives -->
|
||||
* <ANY ng-messages="expression" role="alert">
|
||||
* <ANY ng-messages-include="remoteTplString">...</ANY>
|
||||
* </ANY>
|
||||
*
|
||||
* <!-- or by using element directives -->
|
||||
* <ng-messages for="expression" role="alert">
|
||||
* <ng-messages-include src="expressionValue1">...</ng-messages-include>
|
||||
* </ng-messages>
|
||||
* ```
|
||||
*
|
||||
* {@link module:ngMessages Click here} to learn more about `ngMessages` and `ngMessage`.
|
||||
*
|
||||
* @param {string} ngMessagesInclude|src a string value corresponding to the remote template.
|
||||
*/
|
||||
.directive('ngMessagesInclude',
|
||||
['$templateRequest', '$document', '$compile', function($templateRequest, $document, $compile) {
|
||||
|
||||
return {
|
||||
restrict: 'AE',
|
||||
require: '^^ngMessages', // we only require this for validation sake
|
||||
link: function($scope, element, attrs) {
|
||||
var src = attrs.ngMessagesInclude || attrs.src;
|
||||
$templateRequest(src).then(function(html) {
|
||||
$compile(html)($scope, function(contents) {
|
||||
element.after(contents);
|
||||
|
||||
// the anchor is placed for debugging purposes
|
||||
var anchor = jqLite($document[0].createComment(' ngMessagesInclude: ' + src + ' '));
|
||||
element.after(anchor);
|
||||
|
||||
// we don't want to pollute the DOM anymore by keeping an empty directive element
|
||||
element.remove();
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
}])
|
||||
|
||||
/**
|
||||
* @ngdoc directive
|
||||
* @name ngMessage
|
||||
* @restrict AE
|
||||
* @scope
|
||||
*
|
||||
* @description
|
||||
* `ngMessage` is a directive with the purpose to show and hide a particular message.
|
||||
* For `ngMessage` to operate, a parent `ngMessages` directive on a parent DOM element
|
||||
* must be situated since it determines which messages are visible based on the state
|
||||
* of the provided key/value map that `ngMessages` listens on.
|
||||
*
|
||||
* More information about using `ngMessage` can be found in the
|
||||
* {@link module:ngMessages `ngMessages` module documentation}.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <!-- using attribute directives -->
|
||||
* <ANY ng-messages="expression" role="alert">
|
||||
* <ANY ng-message="stringValue">...</ANY>
|
||||
* <ANY ng-message="stringValue1, stringValue2, ...">...</ANY>
|
||||
* </ANY>
|
||||
*
|
||||
* <!-- or by using element directives -->
|
||||
* <ng-messages for="expression" role="alert">
|
||||
* <ng-message when="stringValue">...</ng-message>
|
||||
* <ng-message when="stringValue1, stringValue2, ...">...</ng-message>
|
||||
* </ng-messages>
|
||||
* ```
|
||||
*
|
||||
* @param {expression} ngMessage|when a string value corresponding to the message key.
|
||||
*/
|
||||
.directive('ngMessage', ngMessageDirectiveFactory('AE'))
|
||||
|
||||
|
||||
/**
|
||||
* @ngdoc directive
|
||||
* @name ngMessageExp
|
||||
* @restrict AE
|
||||
* @scope
|
||||
*
|
||||
* @description
|
||||
* `ngMessageExp` is a directive with the purpose to show and hide a particular message.
|
||||
* For `ngMessageExp` to operate, a parent `ngMessages` directive on a parent DOM element
|
||||
* must be situated since it determines which messages are visible based on the state
|
||||
* of the provided key/value map that `ngMessages` listens on.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <!-- using attribute directives -->
|
||||
* <ANY ng-messages="expression">
|
||||
* <ANY ng-message-exp="expressionValue">...</ANY>
|
||||
* </ANY>
|
||||
*
|
||||
* <!-- or by using element directives -->
|
||||
* <ng-messages for="expression">
|
||||
* <ng-message when-exp="expressionValue">...</ng-message>
|
||||
* </ng-messages>
|
||||
* ```
|
||||
*
|
||||
* {@link module:ngMessages Click here} to learn more about `ngMessages` and `ngMessage`.
|
||||
*
|
||||
* @param {expression} ngMessageExp|whenExp an expression value corresponding to the message key.
|
||||
*/
|
||||
.directive('ngMessageExp', ngMessageDirectiveFactory('A'));
|
||||
|
||||
function ngMessageDirectiveFactory(restrict) {
|
||||
return ['$animate', function($animate) {
|
||||
return {
|
||||
restrict: 'AE',
|
||||
transclude: 'element',
|
||||
terminal: true,
|
||||
require: '^^ngMessages',
|
||||
link: function(scope, element, attrs, ngMessagesCtrl, $transclude) {
|
||||
var commentNode = element[0];
|
||||
|
||||
var records;
|
||||
var staticExp = attrs.ngMessage || attrs.when;
|
||||
var dynamicExp = attrs.ngMessageExp || attrs.whenExp;
|
||||
var assignRecords = function(items) {
|
||||
records = items
|
||||
? (isArray(items)
|
||||
? items
|
||||
: items.split(/[\s,]+/))
|
||||
: null;
|
||||
ngMessagesCtrl.reRender();
|
||||
};
|
||||
|
||||
if (dynamicExp) {
|
||||
assignRecords(scope.$eval(dynamicExp));
|
||||
scope.$watchCollection(dynamicExp, assignRecords);
|
||||
} else {
|
||||
assignRecords(staticExp);
|
||||
}
|
||||
|
||||
var currentElement, messageCtrl;
|
||||
ngMessagesCtrl.register(commentNode, messageCtrl = {
|
||||
test: function(name) {
|
||||
return contains(records, name);
|
||||
},
|
||||
attach: function() {
|
||||
if (!currentElement) {
|
||||
$transclude(scope, function(elm) {
|
||||
$animate.enter(elm, null, element);
|
||||
currentElement = elm;
|
||||
|
||||
// Each time we attach this node to a message we get a new id that we can match
|
||||
// when we are destroying the node later.
|
||||
var $$attachId = currentElement.$$attachId = ngMessagesCtrl.getAttachId();
|
||||
|
||||
// in the event that the parent element is destroyed
|
||||
// by any other structural directive then it's time
|
||||
// to deregister the message from the controller
|
||||
currentElement.on('$destroy', function() {
|
||||
if (currentElement && currentElement.$$attachId === $$attachId) {
|
||||
ngMessagesCtrl.deregister(commentNode);
|
||||
messageCtrl.detach();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
detach: function() {
|
||||
if (currentElement) {
|
||||
var elm = currentElement;
|
||||
currentElement = null;
|
||||
$animate.leave(elm);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
}];
|
||||
|
||||
function contains(collection, key) {
|
||||
if (collection) {
|
||||
return isArray(collection)
|
||||
? collection.indexOf(key) >= 0
|
||||
: collection.hasOwnProperty(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
})(window, window.angular);
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
/*
|
||||
AngularJS v1.4.9
|
||||
(c) 2010-2015 Google, Inc. http://angularjs.org
|
||||
License: MIT
|
||||
*/
|
||||
(function(z,h,A){'use strict';function m(h){return["$animate",function(r){return{restrict:"AE",transclude:"element",terminal:!0,require:"^^ngMessages",link:function(n,f,a,g,l){var c=f[0],p,h=a.ngMessage||a.when;a=a.ngMessageExp||a.whenExp;var k=function(b){p=b?v(b)?b:b.split(/[\s,]+/):null;g.reRender()};a?(k(n.$eval(a)),n.$watchCollection(a,k)):k(h);var e,q;g.register(c,q={test:function(b){var a=p;b=a?v(a)?0<=a.indexOf(b):a.hasOwnProperty(b):void 0;return b},attach:function(){e||l(n,function(b){r.enter(b,
|
||||
null,f);e=b;var a=e.$$attachId=g.getAttachId();e.on("$destroy",function(){e&&e.$$attachId===a&&(g.deregister(c),q.detach())})})},detach:function(){if(e){var b=e;e=null;r.leave(b)}}})}}}]}var v=h.isArray,w=h.forEach,x=h.isString,y=h.element;h.module("ngMessages",[]).directive("ngMessages",["$animate",function(h){function r(f,a){return x(a)&&0===a.length||n(f.$eval(a))}function n(f){return x(f)?f.length:!!f}return{require:"ngMessages",restrict:"AE",controller:["$element","$scope","$attrs",function(f,
|
||||
a,g){function l(b,a){for(var d=a,f=[];d&&d!==b;){var c=d.$$ngMessageNode;if(c&&c.length)return k[c];d.childNodes.length&&-1==f.indexOf(d)?(f.push(d),d=d.childNodes[d.childNodes.length-1]):d=d.previousSibling||d.parentNode}}var c=this,p=0,m=0;this.getAttachId=function(){return m++};var k=this.messages={},e,q;this.render=function(b){b=b||{};e=!1;q=b;for(var p=r(a,g.ngMessagesMultiple)||r(a,g.multiple),d=[],k={},s=c.head,l=!1,m=0;null!=s;){m++;var t=s.message,u=!1;l||w(b,function(a,b){!u&&n(a)&&t.test(b)&&
|
||||
!k[b]&&(u=k[b]=!0,t.attach())});u?l=!p:d.push(t);s=s.next}w(d,function(b){b.detach()});d.length!==m?h.setClass(f,"ng-active","ng-inactive"):h.setClass(f,"ng-inactive","ng-active")};a.$watchCollection(g.ngMessages||g["for"],c.render);this.reRender=function(){e||(e=!0,a.$evalAsync(function(){e&&q&&c.render(q)}))};this.register=function(b,a){var d=p.toString();k[d]={message:a};var e=f[0],g=k[d];c.head?(e=l(e,b))?(g.next=e.next,e.next=g):(g.next=c.head,c.head=g):c.head=g;b.$$ngMessageNode=d;p++;c.reRender()};
|
||||
this.deregister=function(b){var a=b.$$ngMessageNode;delete b.$$ngMessageNode;var d=k[a];(b=l(f[0],b))?b.next=d.next:c.head=d.next;delete k[a];c.reRender()}}]}}]).directive("ngMessagesInclude",["$templateRequest","$document","$compile",function(h,m,n){return{restrict:"AE",require:"^^ngMessages",link:function(f,a,g){var l=g.ngMessagesInclude||g.src;h(l).then(function(c){n(c)(f,function(c){a.after(c);c=y(m[0].createComment(" ngMessagesInclude: "+l+" "));a.after(c);a.remove()})})}}}]).directive("ngMessage",
|
||||
m("AE")).directive("ngMessageExp",m("A"))})(window,window.angular);
|
||||
//# sourceMappingURL=angular-messages.min.js.map
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue