fix(ngTransclude): make the transclusion available to parent post-link

previously the translusion was appended the the ngTranslude element via
$evalAsync which makes the transluded dom unavailable to parent
post-linking functions. By appending translusion in linking phase,
post-linking functions will be able to access it.
This commit is contained in:
Igor Minar 2013-08-20 16:08:24 -07:00
parent 5c4ffb36de
commit bf79bd4194
2 changed files with 69 additions and 10 deletions

View file

@ -49,14 +49,16 @@
*
*/
var ngTranscludeDirective = ngDirective({
controller: ['$transclude', '$element', '$scope', function($transclude, $element, $scope) {
// use evalAsync so that we don't process transclusion before directives on the parent element even when the
// transclusion replaces the current element. (we can't use priority here because that applies only to compile fns
// and not controllers
$scope.$evalAsync(function() {
$transclude(function(clone) {
$element.append(clone);
});
controller: ['$transclude', function($transclude) {
// remember the transclusion fn but call it during linking so that we don't process transclusion before directives on
// the parent element even when the transclusion replaces the current element. (we can't use priority here because
// that applies only to compile fns and not controllers
this.$transclude = $transclude;
}],
link: function($scope, $element, $attrs, controller) {
controller.$transclude(function(clone) {
$element.append(clone);
});
}]
}
});

View file

@ -2823,10 +2823,67 @@ describe('$compile', function() {
expect(jqLite(element.find('span')[1]).text()).toEqual('T:true');
});
});
it('should make the result of a transclusion available to the parent directive in post-linking phase (template)',
function() {
module(function() {
directive('trans', function(log) {
return {
transclude: true,
template: '<div ng-transclude></div>',
link: {
pre: function($scope, $element) {
log('pre(' + $element.text() + ')');
},
post: function($scope, $element) {
log('post(' + $element.text() + ')');
}
}
};
});
});
inject(function(log, $rootScope, $compile) {
element = $compile('<div trans><span>unicorn!</span></div>')($rootScope);
$rootScope.$apply();
expect(log).toEqual('pre(); post(unicorn!)');
});
});
it('should make the result of a transclusion available to the parent directive in pre- and post- linking phase (templateUrl)',
function() {
// when compiling an async directive the transclusion is always processed before the directive
// this is different compared to sync directive. delaying the transclusion makes little sense.
module(function() {
directive('trans', function(log) {
return {
transclude: true,
templateUrl: 'trans.html',
link: {
pre: function($scope, $element) {
log('pre(' + $element.text() + ')');
},
post: function($scope, $element) {
log('post(' + $element.text() + ')');
}
}
};
});
});
inject(function(log, $rootScope, $compile, $templateCache) {
$templateCache.put('trans.html', '<div ng-transclude></div>');
element = $compile('<div trans><span>unicorn!</span></div>')($rootScope);
$rootScope.$apply();
expect(log).toEqual('pre(unicorn!); post(unicorn!)');
});
});
});
describe('img[src] sanitization', function($sce) {
describe('img[src] sanitization', function() {
it('should NOT require trusted values for img src', inject(function($rootScope, $compile, $sce) {
element = $compile('<img src="{{testUrl}}"></img>')($rootScope);
$rootScope.testUrl = 'http://example.com/image.png';