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
This commit is contained in:
jankuca 2013-09-25 15:35:50 -07:00 committed by Jeff Cross
parent 6cadabf910
commit 6a8edc1d43
2 changed files with 39 additions and 3 deletions

View file

@ -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);
}

View file

@ -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() {