fix($compile): collect ranges on multiple directives on one element

The problem was in keeping the values of `attrNameStart` and `attrNameEnd` between directive loop iterations which lead to the compiler looking for multi-element ranges for any directives that happened to be in the directive list after one that was applied on a range. For instance, having a ng-repeat-start and ng-class on a single element with ng-repeat being resolved first made the compiler look for an ng-repeat-end for both ng-repeat and ng-class because the `attrNameEnd` was not reset to a falsy value before the second iteration. As the result, an exception saying the block end element could not be found and the second directive was not actually applied.

Closes #4002

2 files changed, 39 insertions, 3 deletions

diff --git a/src/ng/compile.js b/src/ng/compile.js
index 1b251044..e44f33b7 100644
--- a/src/ng/compile.js
+++ b/src/ng/compile.js
@@ -621,8 +621,8 @@ function $CompileProvider($provide) {
           // iterate over the attributes
           for (var attr, name, nName, ngAttrName, value, nAttrs = node.attributes,
                    j = 0, jj = nAttrs && nAttrs.length; j < jj; j++) {
-            var attrStartName;
-            var attrEndName;
+            var attrStartName = false;
+            var attrEndName = false;
             var index;
 
             attr = nAttrs[j];
@@ -633,11 +633,14 @@ function $CompileProvider($provide) {
               if (NG_ATTR_BINDING.test(ngAttrName)) {
                 name = ngAttrName.substr(6).toLowerCase();
               }
-              if ((index = ngAttrName.lastIndexOf('Start')) != -1 && index == ngAttrName.length - 5) {
+
+              var directiveNName = ngAttrName.replace(/(Start|End)$/, '');
+              if (ngAttrName === directiveNName + 'Start') {
                 attrStartName = name;
                 attrEndName = name.substr(0, name.length - 5) + 'end';
                 name = name.substr(0, name.length - 6);
               }
+
               nName = directiveNormalize(name.toLowerCase());
               attrsMap[nName] = name;
               attrs[nName] = value = trim((msie && name == 'href')
@@ -712,6 +715,7 @@ function $CompileProvider($provide) {
       } else {
         nodes.push(node);
       }
+
       return jqLite(nodes);
     }
 
diff --git a/test/ng/compileSpec.js b/test/ng/compileSpec.js
index d2643878..2d6485d9 100755
--- a/test/ng/compileSpec.js
+++ b/test/ng/compileSpec.js
@@ -3382,6 +3382,38 @@ describe('$compile', function() {
     });
 
 
+    it('should correctly collect ranges on multiple directives on a single element', function () {
+      module(function($compileProvider) {
+        $compileProvider.directive('emptyDirective', function() {
+          return function (scope, element) {
+            element.data('x', 'abc');
+          };
+        });
+        $compileProvider.directive('rangeDirective', function() {
+          return {
+            link: function (scope) {
+              scope.x = 'X';
+              scope.y = 'Y';
+            }
+          };
+        });
+      });
+
+      inject(function ($compile, $rootScope) {
+        element = $compile(
+          '<div>' +
+            '<div range-directive-start empty-directive>{{x}}</div>' +
+            '<div range-directive-end>{{y}}</div>' +
+          '</div>'
+        )($rootScope);
+
+        $rootScope.$digest();
+        expect(element.text()).toBe('XY');
+        expect(angular.element(element[0].firstChild).data('x')).toBe('abc');
+      });
+    });
+
+
     it('should throw error if unterminated (containing termination as a child)', function () {
       module(function($compileProvider) {
         $compileProvider.directive('foo', function() {