在指令的链接函数执行之前编译已包含的内容

Question

I'm looking to compile the contents of transcluded stuff before the link function executes. Currently, if I transclude an ng-bind-safe , the contents will not be added until after my link function.

I can do a scope.$apply() in the link function (and it works) but I get console errors since the digest cycle is already in progress.

Thoughts? Thank you!

Answer 1

During the compilation and linking phases ($compile and $link functions), you only have access to your template in your $compile function, and access to your scope and template in the $link function. You do not have access to the rendered template yet because it hasn't happened yet. For that, you need to setup a watch expression, which you will provide call back functions for. Angular will let you know when the value that you're watching has changed, and within this call back you have access to the rendered template.

This watch expression can only be done within the $link function because that is only place in the directive that you can properly access the scope.

Here is an example:

app.directive('tmTime', function() {
    return {
        restrict: 'A',
        template: '<div>{{time}}</div><div ng-transclude></div>',
        transclude: true,
        link: function (scope, element, attr) {
            scope.time = 'Its hammer time!';
            scope.$watch('time', function(newVal, oldVal) {
                  // this is your call back function
                  // within here, you have access to the rendered template
                  alert(element[0].outerHTML); // (it's hammer time! in first div, transcluded contents in second div)
            });
        }
     };
 });