diff --git a/src/ngMessages/messages.js b/src/ngMessages/messages.js index 5fb585b98d58..53a1d2822fe9 100644 --- a/src/ngMessages/messages.js +++ b/src/ngMessages/messages.js @@ -500,27 +500,21 @@ angular.module('ngMessages', []) return { restrict: 'AE', - require: '^^ngMessages', - compile: function(element, attrs) { - var comment = jqLite($document[0].createComment(' ngMessagesInclude: ')); - element.after(comment); - - return function($scope, $element, attrs, ngMessagesCtrl) { - // we're removing this since we only need access to the newly - // created comment node as an anchor. - element.remove(); - - $templateRequest(attrs.ngMessagesInclude || attrs.src).then(function(html) { - var elements = jqLite('
').html(html).contents(); - var cursor = comment; - forEach(elements, function(elm) { - elm = jqLite(elm); - cursor.after(elm); - cursor = elm; - }); - $compile(elements)($scope); + 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(); }); - }; + }); } }; }]) diff --git a/test/ngMessages/messagesSpec.js b/test/ngMessages/messagesSpec.js index 26215741c6bf..a678b406e609 100644 --- a/test/ngMessages/messagesSpec.js +++ b/test/ngMessages/messagesSpec.js @@ -4,6 +4,10 @@ describe('ngMessages', function() { beforeEach(inject.strictDi()); beforeEach(module('ngMessages')); + function messageChildren(element) { + return (element.length ? element[0] : element).querySelectorAll('[ng-message], [ng-message-exp]'); + } + function they(msg, vals, spec, focus) { forEach(vals, function(val, key) { var m = msg.replace('$prop', key); @@ -236,7 +240,7 @@ describe('ngMessages', function() { $rootScope.col = {}; }); - expect(element.children().length).toBe(0); + expect(messageChildren(element).length).toBe(0); expect(trim(element.text())).toEqual(''); $rootScope.$apply(function() { @@ -246,7 +250,7 @@ describe('ngMessages', function() { }; }); - expect(element.children().length).toBe(1); + expect(messageChildren(element).length).toBe(1); expect(trim(element.text())).toEqual('This message is blue'); $rootScope.$apply(function() { @@ -255,13 +259,13 @@ describe('ngMessages', function() { }; }); - expect(element.children().length).toBe(1); + expect(messageChildren(element).length).toBe(1); expect(trim(element.text())).toEqual('This message is red'); $rootScope.$apply(function() { $rootScope.col = null; }); - expect(element.children().length).toBe(0); + expect(messageChildren(element).length).toBe(0); expect(trim(element.text())).toEqual(''); @@ -272,7 +276,7 @@ describe('ngMessages', function() { }; }); - expect(element.children().length).toBe(0); + expect(messageChildren(element).length).toBe(0); expect(trim(element.text())).toEqual(''); }); }); @@ -346,21 +350,21 @@ describe('ngMessages', function() { ]; }); - expect(messageChildren().length).toBe(0); + expect(messageChildren(element).length).toBe(0); expect(trim(element.text())).toEqual(""); $rootScope.$apply(function() { $rootScope.col = { hair: true }; }); - expect(messageChildren().length).toBe(1); + expect(messageChildren(element).length).toBe(1); expect(trim(element.text())).toEqual("Your hair is too long"); $rootScope.$apply(function() { $rootScope.col = { age: true, hair: true}; }); - expect(messageChildren().length).toBe(1); + expect(messageChildren(element).length).toBe(1); expect(trim(element.text())).toEqual("Your age is incorrect"); $rootScope.$apply(function() { @@ -368,7 +372,7 @@ describe('ngMessages', function() { $rootScope.items.shift(); }); - expect(messageChildren().length).toBe(1); + expect(messageChildren(element).length).toBe(1); expect(trim(element.text())).toEqual("Your hair is too long"); $rootScope.$apply(function() { @@ -377,12 +381,8 @@ describe('ngMessages', function() { $rootScope.col.primary = true; }); - expect(messageChildren().length).toBe(1); + expect(messageChildren(element).length).toBe(1); expect(trim(element.text())).toEqual("Enter something"); - - function messageChildren() { - return element[0].querySelectorAll('[ng-message], [ng-message-exp]'); - } })); @@ -415,6 +415,88 @@ describe('ngMessages', function() { }); describe('when including templates', function() { + they('should work with a dynamic collection model which is managed by ngRepeat', + {'