Açıklama Yok

angular-messages.js 25KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686
  1. /**
  2. * @license AngularJS v1.4.7
  3. * (c) 2010-2015 Google, Inc. http://angularjs.org
  4. * License: MIT
  5. */
  6. (function(window, angular, undefined) {'use strict';
  7. /* jshint ignore:start */
  8. // this code is in the core, but not in angular-messages.js
  9. var isArray = angular.isArray;
  10. var forEach = angular.forEach;
  11. var isString = angular.isString;
  12. var jqLite = angular.element;
  13. /* jshint ignore:end */
  14. /**
  15. * @ngdoc module
  16. * @name ngMessages
  17. * @description
  18. *
  19. * The `ngMessages` module provides enhanced support for displaying messages within templates
  20. * (typically within forms or when rendering message objects that return key/value data).
  21. * Instead of relying on JavaScript code and/or complex ng-if statements within your form template to
  22. * show and hide error messages specific to the state of an input field, the `ngMessages` and
  23. * `ngMessage` directives are designed to handle the complexity, inheritance and priority
  24. * sequencing based on the order of how the messages are defined in the template.
  25. *
  26. * Currently, the ngMessages module only contains the code for the `ngMessages`, `ngMessagesInclude`
  27. * `ngMessage` and `ngMessageExp` directives.
  28. *
  29. * # Usage
  30. * The `ngMessages` directive listens on a key/value collection which is set on the ngMessages attribute.
  31. * Since the {@link ngModel ngModel} directive exposes an `$error` object, this error object can be
  32. * used with `ngMessages` to display control error messages in an easier way than with just regular angular
  33. * template directives.
  34. *
  35. * ```html
  36. * <form name="myForm">
  37. * <label>
  38. * Enter text:
  39. * <input type="text" ng-model="field" name="myField" required minlength="5" />
  40. * </label>
  41. * <div ng-messages="myForm.myField.$error" role="alert">
  42. * <div ng-message="required">You did not enter a field</div>
  43. * <div ng-message="minlength, maxlength">
  44. * Your email must be between 5 and 100 characters long
  45. * </div>
  46. * </div>
  47. * </form>
  48. * ```
  49. *
  50. * Now whatever key/value entries are present within the provided object (in this case `$error`) then
  51. * the ngMessages directive will render the inner first ngMessage directive (depending if the key values
  52. * match the attribute value present on each ngMessage directive). In other words, if your errors
  53. * object contains the following data:
  54. *
  55. * ```javascript
  56. * <!-- keep in mind that ngModel automatically sets these error flags -->
  57. * myField.$error = { minlength : true, required : true };
  58. * ```
  59. *
  60. * Then the `required` message will be displayed first. When required is false then the `minlength` message
  61. * will be displayed right after (since these messages are ordered this way in the template HTML code).
  62. * The prioritization of each message is determined by what order they're present in the DOM.
  63. * Therefore, instead of having custom JavaScript code determine the priority of what errors are
  64. * present before others, the presentation of the errors are handled within the template.
  65. *
  66. * By default, ngMessages will only display one error at a time. However, if you wish to display all
  67. * messages then the `ng-messages-multiple` attribute flag can be used on the element containing the
  68. * ngMessages directive to make this happen.
  69. *
  70. * ```html
  71. * <!-- attribute-style usage -->
  72. * <div ng-messages="myForm.myField.$error" ng-messages-multiple>...</div>
  73. *
  74. * <!-- element-style usage -->
  75. * <ng-messages for="myForm.myField.$error" multiple>...</ng-messages>
  76. * ```
  77. *
  78. * ## Reusing and Overriding Messages
  79. * In addition to prioritization, ngMessages also allows for including messages from a remote or an inline
  80. * template. This allows for generic collection of messages to be reused across multiple parts of an
  81. * application.
  82. *
  83. * ```html
  84. * <script type="text/ng-template" id="error-messages">
  85. * <div ng-message="required">This field is required</div>
  86. * <div ng-message="minlength">This field is too short</div>
  87. * </script>
  88. *
  89. * <div ng-messages="myForm.myField.$error" role="alert">
  90. * <div ng-messages-include="error-messages"></div>
  91. * </div>
  92. * ```
  93. *
  94. * However, including generic messages may not be useful enough to match all input fields, therefore,
  95. * `ngMessages` provides the ability to override messages defined in the remote template by redefining
  96. * them within the directive container.
  97. *
  98. * ```html
  99. * <!-- a generic template of error messages known as "my-custom-messages" -->
  100. * <script type="text/ng-template" id="my-custom-messages">
  101. * <div ng-message="required">This field is required</div>
  102. * <div ng-message="minlength">This field is too short</div>
  103. * </script>
  104. *
  105. * <form name="myForm">
  106. * <label>
  107. * Email address
  108. * <input type="email"
  109. * id="email"
  110. * name="myEmail"
  111. * ng-model="email"
  112. * minlength="5"
  113. * required />
  114. * </label>
  115. * <!-- any ng-message elements that appear BEFORE the ng-messages-include will
  116. * override the messages present in the ng-messages-include template -->
  117. * <div ng-messages="myForm.myEmail.$error" role="alert">
  118. * <!-- this required message has overridden the template message -->
  119. * <div ng-message="required">You did not enter your email address</div>
  120. *
  121. * <!-- this is a brand new message and will appear last in the prioritization -->
  122. * <div ng-message="email">Your email address is invalid</div>
  123. *
  124. * <!-- and here are the generic error messages -->
  125. * <div ng-messages-include="my-custom-messages"></div>
  126. * </div>
  127. * </form>
  128. * ```
  129. *
  130. * In the example HTML code above the message that is set on required will override the corresponding
  131. * required message defined within the remote template. Therefore, with particular input fields (such
  132. * email addresses, date fields, autocomplete inputs, etc...), specialized error messages can be applied
  133. * while more generic messages can be used to handle other, more general input errors.
  134. *
  135. * ## Dynamic Messaging
  136. * ngMessages also supports using expressions to dynamically change key values. Using arrays and
  137. * repeaters to list messages is also supported. This means that the code below will be able to
  138. * fully adapt itself and display the appropriate message when any of the expression data changes:
  139. *
  140. * ```html
  141. * <form name="myForm">
  142. * <label>
  143. * Email address
  144. * <input type="email"
  145. * name="myEmail"
  146. * ng-model="email"
  147. * minlength="5"
  148. * required />
  149. * </label>
  150. * <div ng-messages="myForm.myEmail.$error" role="alert">
  151. * <div ng-message="required">You did not enter your email address</div>
  152. * <div ng-repeat="errorMessage in errorMessages">
  153. * <!-- use ng-message-exp for a message whose key is given by an expression -->
  154. * <div ng-message-exp="errorMessage.type">{{ errorMessage.text }}</div>
  155. * </div>
  156. * </div>
  157. * </form>
  158. * ```
  159. *
  160. * The `errorMessage.type` expression can be a string value or it can be an array so
  161. * that multiple errors can be associated with a single error message:
  162. *
  163. * ```html
  164. * <label>
  165. * Email address
  166. * <input type="email"
  167. * ng-model="data.email"
  168. * name="myEmail"
  169. * ng-minlength="5"
  170. * ng-maxlength="100"
  171. * required />
  172. * </label>
  173. * <div ng-messages="myForm.myEmail.$error" role="alert">
  174. * <div ng-message-exp="'required'">You did not enter your email address</div>
  175. * <div ng-message-exp="['minlength', 'maxlength']">
  176. * Your email must be between 5 and 100 characters long
  177. * </div>
  178. * </div>
  179. * ```
  180. *
  181. * Feel free to use other structural directives such as ng-if and ng-switch to further control
  182. * what messages are active and when. Be careful, if you place ng-message on the same element
  183. * as these structural directives, Angular may not be able to determine if a message is active
  184. * or not. Therefore it is best to place the ng-message on a child element of the structural
  185. * directive.
  186. *
  187. * ```html
  188. * <div ng-messages="myForm.myEmail.$error" role="alert">
  189. * <div ng-if="showRequiredError">
  190. * <div ng-message="required">Please enter something</div>
  191. * </div>
  192. * </div>
  193. * ```
  194. *
  195. * ## Animations
  196. * If the `ngAnimate` module is active within the application then the `ngMessages`, `ngMessage` and
  197. * `ngMessageExp` directives will trigger animations whenever any messages are added and removed from
  198. * the DOM by the `ngMessages` directive.
  199. *
  200. * Whenever the `ngMessages` directive contains one or more visible messages then the `.ng-active` CSS
  201. * class will be added to the element. The `.ng-inactive` CSS class will be applied when there are no
  202. * messages present. Therefore, CSS transitions and keyframes as well as JavaScript animations can
  203. * hook into the animations whenever these classes are added/removed.
  204. *
  205. * Let's say that our HTML code for our messages container looks like so:
  206. *
  207. * ```html
  208. * <div ng-messages="myMessages" class="my-messages" role="alert">
  209. * <div ng-message="alert" class="some-message">...</div>
  210. * <div ng-message="fail" class="some-message">...</div>
  211. * </div>
  212. * ```
  213. *
  214. * Then the CSS animation code for the message container looks like so:
  215. *
  216. * ```css
  217. * .my-messages {
  218. * transition:1s linear all;
  219. * }
  220. * .my-messages.ng-active {
  221. * // messages are visible
  222. * }
  223. * .my-messages.ng-inactive {
  224. * // messages are hidden
  225. * }
  226. * ```
  227. *
  228. * Whenever an inner message is attached (becomes visible) or removed (becomes hidden) then the enter
  229. * and leave animation is triggered for each particular element bound to the `ngMessage` directive.
  230. *
  231. * Therefore, the CSS code for the inner messages looks like so:
  232. *
  233. * ```css
  234. * .some-message {
  235. * transition:1s linear all;
  236. * }
  237. *
  238. * .some-message.ng-enter {}
  239. * .some-message.ng-enter.ng-enter-active {}
  240. *
  241. * .some-message.ng-leave {}
  242. * .some-message.ng-leave.ng-leave-active {}
  243. * ```
  244. *
  245. * {@link ngAnimate Click here} to learn how to use JavaScript animations or to learn more about ngAnimate.
  246. */
  247. angular.module('ngMessages', [])
  248. /**
  249. * @ngdoc directive
  250. * @module ngMessages
  251. * @name ngMessages
  252. * @restrict AE
  253. *
  254. * @description
  255. * `ngMessages` is a directive that is designed to show and hide messages based on the state
  256. * of a key/value object that it listens on. The directive itself complements error message
  257. * reporting with the `ngModel` $error object (which stores a key/value state of validation errors).
  258. *
  259. * `ngMessages` manages the state of internal messages within its container element. The internal
  260. * messages use the `ngMessage` directive and will be inserted/removed from the page depending
  261. * on if they're present within the key/value object. By default, only one message will be displayed
  262. * at a time and this depends on the prioritization of the messages within the template. (This can
  263. * be changed by using the `ng-messages-multiple` or `multiple` attribute on the directive container.)
  264. *
  265. * A remote template can also be used to promote message reusability and messages can also be
  266. * overridden.
  267. *
  268. * {@link module:ngMessages Click here} to learn more about `ngMessages` and `ngMessage`.
  269. *
  270. * @usage
  271. * ```html
  272. * <!-- using attribute directives -->
  273. * <ANY ng-messages="expression" role="alert">
  274. * <ANY ng-message="stringValue">...</ANY>
  275. * <ANY ng-message="stringValue1, stringValue2, ...">...</ANY>
  276. * <ANY ng-message-exp="expressionValue">...</ANY>
  277. * </ANY>
  278. *
  279. * <!-- or by using element directives -->
  280. * <ng-messages for="expression" role="alert">
  281. * <ng-message when="stringValue">...</ng-message>
  282. * <ng-message when="stringValue1, stringValue2, ...">...</ng-message>
  283. * <ng-message when-exp="expressionValue">...</ng-message>
  284. * </ng-messages>
  285. * ```
  286. *
  287. * @param {string} ngMessages an angular expression evaluating to a key/value object
  288. * (this is typically the $error object on an ngModel instance).
  289. * @param {string=} ngMessagesMultiple|multiple when set, all messages will be displayed with true
  290. *
  291. * @example
  292. * <example name="ngMessages-directive" module="ngMessagesExample"
  293. * deps="angular-messages.js"
  294. * animations="true" fixBase="true">
  295. * <file name="index.html">
  296. * <form name="myForm">
  297. * <label>
  298. * Enter your name:
  299. * <input type="text"
  300. * name="myName"
  301. * ng-model="name"
  302. * ng-minlength="5"
  303. * ng-maxlength="20"
  304. * required />
  305. * </label>
  306. * <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>
  307. *
  308. * <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert">
  309. * <div ng-message="required">You did not enter a field</div>
  310. * <div ng-message="minlength">Your field is too short</div>
  311. * <div ng-message="maxlength">Your field is too long</div>
  312. * </div>
  313. * </form>
  314. * </file>
  315. * <file name="script.js">
  316. * angular.module('ngMessagesExample', ['ngMessages']);
  317. * </file>
  318. * </example>
  319. */
  320. .directive('ngMessages', ['$animate', function($animate) {
  321. var ACTIVE_CLASS = 'ng-active';
  322. var INACTIVE_CLASS = 'ng-inactive';
  323. return {
  324. require: 'ngMessages',
  325. restrict: 'AE',
  326. controller: ['$element', '$scope', '$attrs', function($element, $scope, $attrs) {
  327. var ctrl = this;
  328. var latestKey = 0;
  329. var nextAttachId = 0;
  330. this.getAttachId = function getAttachId() { return nextAttachId++; };
  331. var messages = this.messages = {};
  332. var renderLater, cachedCollection;
  333. this.render = function(collection) {
  334. collection = collection || {};
  335. renderLater = false;
  336. cachedCollection = collection;
  337. // this is true if the attribute is empty or if the attribute value is truthy
  338. var multiple = isAttrTruthy($scope, $attrs.ngMessagesMultiple) ||
  339. isAttrTruthy($scope, $attrs.multiple);
  340. var unmatchedMessages = [];
  341. var matchedKeys = {};
  342. var messageItem = ctrl.head;
  343. var messageFound = false;
  344. var totalMessages = 0;
  345. // we use != instead of !== to allow for both undefined and null values
  346. while (messageItem != null) {
  347. totalMessages++;
  348. var messageCtrl = messageItem.message;
  349. var messageUsed = false;
  350. if (!messageFound) {
  351. forEach(collection, function(value, key) {
  352. if (!messageUsed && truthy(value) && messageCtrl.test(key)) {
  353. // this is to prevent the same error name from showing up twice
  354. if (matchedKeys[key]) return;
  355. matchedKeys[key] = true;
  356. messageUsed = true;
  357. messageCtrl.attach();
  358. }
  359. });
  360. }
  361. if (messageUsed) {
  362. // unless we want to display multiple messages then we should
  363. // set a flag here to avoid displaying the next message in the list
  364. messageFound = !multiple;
  365. } else {
  366. unmatchedMessages.push(messageCtrl);
  367. }
  368. messageItem = messageItem.next;
  369. }
  370. forEach(unmatchedMessages, function(messageCtrl) {
  371. messageCtrl.detach();
  372. });
  373. unmatchedMessages.length !== totalMessages
  374. ? $animate.setClass($element, ACTIVE_CLASS, INACTIVE_CLASS)
  375. : $animate.setClass($element, INACTIVE_CLASS, ACTIVE_CLASS);
  376. };
  377. $scope.$watchCollection($attrs.ngMessages || $attrs['for'], ctrl.render);
  378. this.reRender = function() {
  379. if (!renderLater) {
  380. renderLater = true;
  381. $scope.$evalAsync(function() {
  382. if (renderLater) {
  383. cachedCollection && ctrl.render(cachedCollection);
  384. }
  385. });
  386. }
  387. };
  388. this.register = function(comment, messageCtrl) {
  389. var nextKey = latestKey.toString();
  390. messages[nextKey] = {
  391. message: messageCtrl
  392. };
  393. insertMessageNode($element[0], comment, nextKey);
  394. comment.$$ngMessageNode = nextKey;
  395. latestKey++;
  396. ctrl.reRender();
  397. };
  398. this.deregister = function(comment) {
  399. var key = comment.$$ngMessageNode;
  400. delete comment.$$ngMessageNode;
  401. removeMessageNode($element[0], comment, key);
  402. delete messages[key];
  403. ctrl.reRender();
  404. };
  405. function findPreviousMessage(parent, comment) {
  406. var prevNode = comment;
  407. var parentLookup = [];
  408. while (prevNode && prevNode !== parent) {
  409. var prevKey = prevNode.$$ngMessageNode;
  410. if (prevKey && prevKey.length) {
  411. return messages[prevKey];
  412. }
  413. // dive deeper into the DOM and examine its children for any ngMessage
  414. // comments that may be in an element that appears deeper in the list
  415. if (prevNode.childNodes.length && parentLookup.indexOf(prevNode) == -1) {
  416. parentLookup.push(prevNode);
  417. prevNode = prevNode.childNodes[prevNode.childNodes.length - 1];
  418. } else {
  419. prevNode = prevNode.previousSibling || prevNode.parentNode;
  420. }
  421. }
  422. }
  423. function insertMessageNode(parent, comment, key) {
  424. var messageNode = messages[key];
  425. if (!ctrl.head) {
  426. ctrl.head = messageNode;
  427. } else {
  428. var match = findPreviousMessage(parent, comment);
  429. if (match) {
  430. messageNode.next = match.next;
  431. match.next = messageNode;
  432. } else {
  433. messageNode.next = ctrl.head;
  434. ctrl.head = messageNode;
  435. }
  436. }
  437. }
  438. function removeMessageNode(parent, comment, key) {
  439. var messageNode = messages[key];
  440. var match = findPreviousMessage(parent, comment);
  441. if (match) {
  442. match.next = messageNode.next;
  443. } else {
  444. ctrl.head = messageNode.next;
  445. }
  446. }
  447. }]
  448. };
  449. function isAttrTruthy(scope, attr) {
  450. return (isString(attr) && attr.length === 0) || //empty attribute
  451. truthy(scope.$eval(attr));
  452. }
  453. function truthy(val) {
  454. return isString(val) ? val.length : !!val;
  455. }
  456. }])
  457. /**
  458. * @ngdoc directive
  459. * @name ngMessagesInclude
  460. * @restrict AE
  461. * @scope
  462. *
  463. * @description
  464. * `ngMessagesInclude` is a directive with the purpose to import existing ngMessage template
  465. * code from a remote template and place the downloaded template code into the exact spot
  466. * that the ngMessagesInclude directive is placed within the ngMessages container. This allows
  467. * for a series of pre-defined messages to be reused and also allows for the developer to
  468. * determine what messages are overridden due to the placement of the ngMessagesInclude directive.
  469. *
  470. * @usage
  471. * ```html
  472. * <!-- using attribute directives -->
  473. * <ANY ng-messages="expression" role="alert">
  474. * <ANY ng-messages-include="remoteTplString">...</ANY>
  475. * </ANY>
  476. *
  477. * <!-- or by using element directives -->
  478. * <ng-messages for="expression" role="alert">
  479. * <ng-messages-include src="expressionValue1">...</ng-messages-include>
  480. * </ng-messages>
  481. * ```
  482. *
  483. * {@link module:ngMessages Click here} to learn more about `ngMessages` and `ngMessage`.
  484. *
  485. * @param {string} ngMessagesInclude|src a string value corresponding to the remote template.
  486. */
  487. .directive('ngMessagesInclude',
  488. ['$templateRequest', '$document', '$compile', function($templateRequest, $document, $compile) {
  489. return {
  490. restrict: 'AE',
  491. require: '^^ngMessages', // we only require this for validation sake
  492. link: function($scope, element, attrs) {
  493. var src = attrs.ngMessagesInclude || attrs.src;
  494. $templateRequest(src).then(function(html) {
  495. $compile(html)($scope, function(contents) {
  496. element.after(contents);
  497. // the anchor is placed for debugging purposes
  498. var anchor = jqLite($document[0].createComment(' ngMessagesInclude: ' + src + ' '));
  499. element.after(anchor);
  500. // we don't want to pollute the DOM anymore by keeping an empty directive element
  501. element.remove();
  502. });
  503. });
  504. }
  505. };
  506. }])
  507. /**
  508. * @ngdoc directive
  509. * @name ngMessage
  510. * @restrict AE
  511. * @scope
  512. *
  513. * @description
  514. * `ngMessage` is a directive with the purpose to show and hide a particular message.
  515. * For `ngMessage` to operate, a parent `ngMessages` directive on a parent DOM element
  516. * must be situated since it determines which messages are visible based on the state
  517. * of the provided key/value map that `ngMessages` listens on.
  518. *
  519. * More information about using `ngMessage` can be found in the
  520. * {@link module:ngMessages `ngMessages` module documentation}.
  521. *
  522. * @usage
  523. * ```html
  524. * <!-- using attribute directives -->
  525. * <ANY ng-messages="expression" role="alert">
  526. * <ANY ng-message="stringValue">...</ANY>
  527. * <ANY ng-message="stringValue1, stringValue2, ...">...</ANY>
  528. * </ANY>
  529. *
  530. * <!-- or by using element directives -->
  531. * <ng-messages for="expression" role="alert">
  532. * <ng-message when="stringValue">...</ng-message>
  533. * <ng-message when="stringValue1, stringValue2, ...">...</ng-message>
  534. * </ng-messages>
  535. * ```
  536. *
  537. * @param {expression} ngMessage|when a string value corresponding to the message key.
  538. */
  539. .directive('ngMessage', ngMessageDirectiveFactory('AE'))
  540. /**
  541. * @ngdoc directive
  542. * @name ngMessageExp
  543. * @restrict AE
  544. * @scope
  545. *
  546. * @description
  547. * `ngMessageExp` is a directive with the purpose to show and hide a particular message.
  548. * For `ngMessageExp` to operate, a parent `ngMessages` directive on a parent DOM element
  549. * must be situated since it determines which messages are visible based on the state
  550. * of the provided key/value map that `ngMessages` listens on.
  551. *
  552. * @usage
  553. * ```html
  554. * <!-- using attribute directives -->
  555. * <ANY ng-messages="expression">
  556. * <ANY ng-message-exp="expressionValue">...</ANY>
  557. * </ANY>
  558. *
  559. * <!-- or by using element directives -->
  560. * <ng-messages for="expression">
  561. * <ng-message when-exp="expressionValue">...</ng-message>
  562. * </ng-messages>
  563. * ```
  564. *
  565. * {@link module:ngMessages Click here} to learn more about `ngMessages` and `ngMessage`.
  566. *
  567. * @param {expression} ngMessageExp|whenExp an expression value corresponding to the message key.
  568. */
  569. .directive('ngMessageExp', ngMessageDirectiveFactory('A'));
  570. function ngMessageDirectiveFactory(restrict) {
  571. return ['$animate', function($animate) {
  572. return {
  573. restrict: 'AE',
  574. transclude: 'element',
  575. terminal: true,
  576. require: '^^ngMessages',
  577. link: function(scope, element, attrs, ngMessagesCtrl, $transclude) {
  578. var commentNode = element[0];
  579. var records;
  580. var staticExp = attrs.ngMessage || attrs.when;
  581. var dynamicExp = attrs.ngMessageExp || attrs.whenExp;
  582. var assignRecords = function(items) {
  583. records = items
  584. ? (isArray(items)
  585. ? items
  586. : items.split(/[\s,]+/))
  587. : null;
  588. ngMessagesCtrl.reRender();
  589. };
  590. if (dynamicExp) {
  591. assignRecords(scope.$eval(dynamicExp));
  592. scope.$watchCollection(dynamicExp, assignRecords);
  593. } else {
  594. assignRecords(staticExp);
  595. }
  596. var currentElement, messageCtrl;
  597. ngMessagesCtrl.register(commentNode, messageCtrl = {
  598. test: function(name) {
  599. return contains(records, name);
  600. },
  601. attach: function() {
  602. if (!currentElement) {
  603. $transclude(scope, function(elm) {
  604. $animate.enter(elm, null, element);
  605. currentElement = elm;
  606. // Each time we attach this node to a message we get a new id that we can match
  607. // when we are destroying the node later.
  608. var $$attachId = currentElement.$$attachId = ngMessagesCtrl.getAttachId();
  609. // in the event that the parent element is destroyed
  610. // by any other structural directive then it's time
  611. // to deregister the message from the controller
  612. currentElement.on('$destroy', function() {
  613. if (currentElement && currentElement.$$attachId === $$attachId) {
  614. ngMessagesCtrl.deregister(commentNode);
  615. messageCtrl.detach();
  616. }
  617. });
  618. });
  619. }
  620. },
  621. detach: function() {
  622. if (currentElement) {
  623. var elm = currentElement;
  624. currentElement = null;
  625. $animate.leave(elm);
  626. }
  627. }
  628. });
  629. }
  630. };
  631. }];
  632. function contains(collection, key) {
  633. if (collection) {
  634. return isArray(collection)
  635. ? collection.indexOf(key) >= 0
  636. : collection.hasOwnProperty(key);
  637. }
  638. }
  639. }
  640. })(window, window.angular);