AngularJS指令控制器操纵DOM

Question

The Developer's Guide says, controller specified inside a directive is instantiated before the pre-link function and also that it is NOT safe to do DOM manipulation in the pre-link function.

Then why is it that controller takes as its third parameter, $transclude, which does DOM manipulation as in the following example:

testapp.directive('buttonBar', function() {
    return {
        restrict: 'EA',
        template: '<div class="span4 well clearfix"><div class="primary-block pull-right"></div><div class="secondary-block"></div></div>',
        replace: true,
        transclude: true,
        scope: {},
        controller: ['$scope', '$element', '$transclude', function ($scope, $element, $transclude) {
            $transclude(function(clone) {
                var primaryBlock = $element.find('div.primary-block');
                var secondaryBlock = $element.find('div.secondary-block');
                var transcludedButtons = clone.filter(':button'); 
                angular.forEach(transcludedButtons, function(e) {
                    if (angular.element(e).hasClass('primary')) {
                        primaryBlock.append(e);
                    } else if (angular.element(e).hasClass('secondary')) {
                        secondaryBlock.append(e);
                    }
                });
            });
        }],
    };
});

in the discussion from http://blog.omkarpatil.com/2012/11/transclude-in-angularjs.html

Thanks

Answer 1

It seems like the function that you pass to $transclude is executed during the link phase: https://github.com/angular/angular.js/blob/v1.1.5/src/ng/compile.js#L471

EDITED : I changed the GH reference to a tagged release so that there is no ambiguity about what code I'm referencing.