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

replace:true on a directive changes order of directive linking #1567

Closed
mprobst opened this issue Nov 13, 2012 · 7 comments
Closed

replace:true on a directive changes order of directive linking #1567

mprobst opened this issue Nov 13, 2012 · 7 comments

Comments

@mprobst
Copy link
Contributor

mprobst commented Nov 13, 2012

See also this fiddle: http://jsfiddle.net/VhF7j/6/

var mod = angular.module('test', []);

mod.directive('testParent', function() {
    return {
        template: '<p ng-transclude></p>',
        transclude: true,
        // replace: true, // Enable to see the issue
        compile: function($tElement, $tAttr) {
            return {
                pre: function($scope, $element, $attr) {
                    console.log('parent link pre');
                },
                post: function($scope, $element, $attr) {
                    console.log('parent link post');
                }
            };
        }
    };
});

mod.directive('testChild', function() {
    return {
        link: function($scope, $element, $attr) {
            console.log('child link');
        }
    };
});


When a directive has 'replace:true', all its child directives are linked (post!) before its pre-link is evaluated. This makes it impossible to rely on passing information between directives through element.data and element.inheritedData.

@jrowny
Copy link

jrowny commented Jan 16, 2013

I'm running into this as well

@tabanliviu
Copy link

Wrapping the ng-transclude element in a div apparently fixes the issue: http://jsfiddle.net/VhF7j/9/

template: '<div><p ng-transclude></p></div>'

It seems that if the transclude root is the same as the template root then that directive is added at the end of the linking chain

@deanapeterson
Copy link
Contributor

I came across a related issue while experimenting with different directive params.

{
    priority : 0 // fails if set higher
    replace : true,
    transclude : true,
    template : "<div ng-transclude></div>"
}

see here http://jsfiddle.net/DeanIconWeb/CvUpk/

@ericclemmons
Copy link

Holy crap thank you for opening this issue! I've been banging my head against this for over an hour just to learn that replace: false fixes it, as well as wrapping ng-transclude in a parent element.

@Narretz
Copy link
Contributor

Narretz commented Dec 17, 2013

This is fixed in 1.2.5 (possibly earlier), see http://jsfiddle.net/VhF7j/10/

@Narretz
Copy link
Contributor

Narretz commented Dec 18, 2013

@petebacondarwin can be closed, see fiddle above

@petebacondarwin
Copy link
Member

@Narretz - nice one. Thanks!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

7 participants