Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

bug(ngMessages): ngMessagesInclude crashes inside ngRepeat #11196

Closed
adrianandreias opened this issue Feb 26, 2015 · 3 comments
Closed

bug(ngMessages): ngMessagesInclude crashes inside ngRepeat #11196

adrianandreias opened this issue Feb 26, 2015 · 3 comments
Assignees
@matsko
Milestone
1.4.0-beta.6 / 1....

Comments

@adrianandreias
Copy link

Bug introduced in 1.4.0-beta.5: using ngMessagesInclude inside an ngRepeat (with ngForm - might be relevant) crashes with error:

Error: [$compile:ctreq] Controller 'ngMessages', required by directive 'ngMessage', can't be found!

See demo: http://plnkr.co/edit/9tEwZzf1q6qeUrL0rBxn?p=preview
Code is working fine in 1.3.14: http://plnkr.co/edit/yAuxsFGYymCj9fAAqTVw?p=preview

Crash does not occur if msgs.html is empty, it must have (any) content., i.e.:

<span ng-message="required">Field is required</span>
<span ng-message="number">Fill in a number</span>

I'll paste the demo code here, too:

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular-messages.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div ng-app="myApp">
    <form name="myForm">
      <ul>


        <li ng-repeat="i in [1, 2, 3, 4]" ng-form="theForm">{{ i }}:
          <input type="number" ng-model="number" name="number">
          <div ng-messages="theForm.number.$error">
            <ng-messages-include src="msgs.html"></ng-messages-include>
          </div>
        </li>


      </ul>
    </form>
  </div>
</body>
</html>
angular.module('myApp', ['ngMessages'])
  .controller('MyCtrl', ['$scope', function($scope) {
  }]);

@matsko this is related to #10676 and matsko@d97733f
@matsko
Copy link
Contributor

matsko commented Feb 26, 2015

Looking into it right now.

matsko added a commit to matsko/angular.js that referenced this issue Feb 26, 2015
@matsko
fix(ngMessages): ensure that the ngMessagesInclude element is persist…
8a6c0db 
…ed in

the DOM

NgRepeat and any other directives that alter the DOM structure using
transclusion may cause ngMessagesInclude to behave in an unpredictable
manner. This fix ensures that the element containing the
ngMessagesInclude directive is persisted in the DOM and its downloaded
template code will be placed inside of that element. Despite there now being
an extra child container within the ngMessages element, the selection
process of finding the next message to display still works in the same
way.

BREAKING CHANGE:

From here on the ngMessageInclude directive will be persisted in the dom
alongside any adjacent ngMessage elements. The interior ngMessage
elements present within the ngMessageInclude template will be stored as
child elements. The reasoning for this is to avoid any collision with
ngRepeat or any other directive elements that may cause problems with
inherited controllers, scopes and transclusion.

This patch shouldn't have any effect on your JavaScript code, however
when it comes to animations and CSS styling please note that the
structure of DOM child elements is different.

```html
<!-- before (1.4.0-beta.5 and lower) -->
<div ng-message="val">
  <div ng-message="error1">...</div>

  <!-- ng-messages-include="aAndB.html" put this in here -->
  <div ng-message="errorA">...</div>
  <div ng-message="errorB">...</div>

  <div ng-message="error10">...</div>
<div>

<!-- now -->
<div ng-message="val">
  <div ng-message="error1">...</div>

  <!-- ng-messages-include="aAndB.html" put this in here -->
  <div ng-messages-include="aAndB.html">
    <div ng-message="errorA">...</div>
    <div ng-message="errorB">...</div>
  </div>

  <div ng-message="error10">...</div>
<div>
```

Closes angular#11196
@matsko matsko mentioned this issue Feb 26, 2015
Closed
matsko added a commit to matsko/angular.js that referenced this issue Feb 26, 2015
@matsko
fix(ngMessages): ensure that the ngMessagesInclude element is persist…
3200e3b 
…ed in

the DOM

NgRepeat and any other directives that alter the DOM structure using
transclusion may cause ngMessagesInclude to behave in an unpredictable
manner. This fix ensures that the element containing the
ngMessagesInclude directive is persisted in the DOM and its downloaded
template code will be placed inside of that element. Despite there now being
an extra child container within the ngMessages element, the selection
process of finding the next message to display still works in the same
way.

BREAKING CHANGE:

From here on the ngMessageInclude directive will be persisted in the dom
alongside any adjacent ngMessage elements. The interior ngMessage
elements present within the ngMessageInclude template will be stored as
child elements. The reasoning for this is to avoid any collision with
ngRepeat or any other directive elements that may cause problems with
inherited controllers, scopes and transclusion.

This patch shouldn't have any effect on your JavaScript code, however
when it comes to animations and CSS styling please note that the
structure of DOM child elements is different.

```html
<!-- before (1.4.0-beta.5 and lower) -->
<div ng-message="val">
  <div ng-message="error1">...</div>

  <!-- ng-messages-include="aAndB.html" put this in here -->
  <div ng-message="errorA">...</div>
  <div ng-message="errorB">...</div>

  <div ng-message="error10">...</div>
<div>

<!-- now -->
<div ng-message="val">
  <div ng-message="error1">...</div>

  <!-- ng-messages-include="aAndB.html" put this in here -->
  <div ng-messages-include="aAndB.html">
    <div ng-message="errorA">...</div>
    <div ng-message="errorB">...</div>
  </div>

  <div ng-message="error10">...</div>
<div>
```

Closes angular#11196
matsko added a commit to matsko/angular.js that referenced this issue Feb 26, 2015
@matsko
fix(ngMessages): ensure that the ngMessagesInclude element is persist…
68d5bef 
…ed in

the DOM

NgRepeat and any other directives that alter the DOM structure using
transclusion may cause ngMessagesInclude to behave in an unpredictable
manner. This fix ensures that the element containing the
ngMessagesInclude directive is persisted in the DOM and its downloaded
template code will be placed inside of that element. Despite there now being
an extra child container within the ngMessages element, the selection
process of finding the next message to display still works in the same
way.

BREAKING CHANGE:

From here on the ngMessageInclude directive will be persisted in the dom
alongside any adjacent ngMessage elements. The interior ngMessage
elements present within the ngMessageInclude template will be stored as
child elements. The reasoning for this is to avoid any collision with
ngRepeat or any other directive elements that may cause problems with
inherited controllers, scopes and transclusion.

This patch shouldn't have any effect on your JavaScript code, however
when it comes to animations and CSS styling please note that the
structure of DOM child elements is different.

```html
<!-- before (1.4.0-beta.5 and lower) -->
<div ng-message="val">
  <div ng-message="error1">...</div>

  <!-- ng-messages-include="aAndB.html" put this in here -->
  <div ng-message="errorA">...</div>
  <div ng-message="errorB">...</div>

  <div ng-message="error10">...</div>
<div>

<!-- now -->
<div ng-message="val">
  <div ng-message="error1">...</div>

  <!-- ng-messages-include="aAndB.html" put this in here -->
  <div ng-messages-include="aAndB.html">
    <div ng-message="errorA">...</div>
    <div ng-message="errorB">...</div>
  </div>

  <div ng-message="error10">...</div>
<div>
```

Closes angular#11196
@matsko
Copy link
Contributor

matsko commented Feb 26, 2015

@adrianandreias #11199 fixes the issue. And your demo has been tested against it and it works.

@matsko matsko added this to the 1.4.0-beta.6 / 1.3.15 milestone Feb 26, 2015
@matsko matsko self-assigned this Feb 26, 2015
matsko added a commit to matsko/angular.js that referenced this issue Feb 27, 2015
@matsko
fix(ngMessages): ensure that multi-level transclusion works with ngMe…
c753b39 
…ssageInclude

ngRepeat and any other directives that alter the DOM structure using
transclusion may cause ngMessagesInclude to behave in an unpredictable
manner. This fix ensures that the element containing the ngMessagesInclude
directive will stay in the DOM to avoid these issues.

Closes angular#11196
matsko added a commit to matsko/angular.js that referenced this issue Feb 27, 2015
@matsko
fix(ngMessages): ensure that multi-level transclusion works with ngMe…
99c101b 
…ssagesInclude

ngRepeat and any other directives that alter the DOM structure using
transclusion may cause ngMessagesInclude to behave in an unpredictable
manner. This fix ensures that the element containing the ngMessagesInclude
directive will stay in the DOM to avoid these issues.

Closes angular#11196
matsko added a commit to matsko/angular.js that referenced this issue Feb 27, 2015
@matsko
fix(ngMessages): ensure that multi-level transclusion works with ngMe…
50b118e 
…ssagesInclude

ngRepeat and any other directives that alter the DOM structure using
transclusion may cause ngMessagesInclude to behave in an unpredictable
manner. This fix ensures that the element containing the ngMessagesInclude
directive will stay in the DOM to avoid these issues.

Closes angular#11196
matsko added a commit to matsko/angular.js that referenced this issue Feb 27, 2015
@matsko
fix(ngMessages): ensure that multi-level transclusion works with ngMe…
c87c777 
…ssagesInclude

ngRepeat and any other directives that alter the DOM structure using
transclusion may cause ngMessagesInclude to behave in an unpredictable
manner. This fix ensures that the element containing the ngMessagesInclude
directive will stay in the DOM to avoid these issues.

Closes angular#11196
@matsko
Copy link
Contributor

matsko commented Feb 27, 2015

Fixed via #11199

@matsko matsko closed this as completed Feb 27, 2015
matsko added a commit that referenced this issue Feb 27, 2015
@matsko
fix(ngMessages): ensure that multi-level transclusion works with ngMe…
d7ec5f3 
…ssagesInclude

ngRepeat and any other directives that alter the DOM structure using
transclusion may cause ngMessagesInclude to behave in an unpredictable
manner. This fix ensures that the element containing the ngMessagesInclude
directive will stay in the DOM to avoid these issues.

Closes #11196
@dmitriynosenko dmitriynosenko mentioned this issue Jul 21, 2015
Closed
netman92 pushed a commit to netman92/angular.js that referenced this issue Aug 8, 2015
@matsko @netman92
fix(ngMessages): ensure that multi-level transclusion works with ngMe…
773c236 
…ssagesInclude

ngRepeat and any other directives that alter the DOM structure using
transclusion may cause ngMessagesInclude to behave in an unpredictable
manner. This fix ensures that the element containing the ngMessagesInclude
directive will stay in the DOM to avoid these issues.

Closes angular#11196
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@matsko matsko

Labels
None yet
Projects
None yet
Milestone
1.4.0-beta.6 / 1.3.15
Development

Successfully merging a pull request may close this issue.

fix(ngMessages): ensure that multi-level transclusion works with ngMessagesInclude matsko/angular.js
2 participants
@matsko @adrianandreias