Transclusion (true) - Combining values

Question

Consider the following code (http://jsbin.com/IfejIWES/1/):

HTML:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.3/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div ng-controller="MyCtrl">

    <div my-directive>
        <button>some button</button>
        <a href="#">and a link</a>
    </div>
</div>
</body>
</html>

JS:

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

function MyCtrl($scope) {
    //$scope.log=[];   
}

myApp.directive('myDirective', function(){
    return{
        transclude: true,
        template: '<div class="something" ng-transclude> This is my directive content</div>'
    };
});

Using version 1.1.3 of AngularJS, the output combines the button and anchor from my-directive (in the HTML) with the template inner text 'This is my directive content'.

If I change the version to 1.2.1 the my-directive content replaces the template inner text.

Is there a way to have angular 1.2.1 (and later) do the older behavior?

score 1 · Answer 1 · answered Jan 07 '14 at 20:47

1

No. This was a very intentional change. See this commit.

answered Jan 07 '14 at 20:47

Jeff Hubbard

9,822
3
30
28

score 0 · Answer 2 · answered Jan 07 '14 at 21:17

The link provided by Jeff Hubbard (thanks Jeff) started me in the right direction. From the comments of that post somebody (https://github.com/angular/angular.js/commit/eed299a31b5a6dd0363133c5f9271bf33d090c94#commitcomment-4685184) posted a work around: http://plnkr.co/edit/EjO8SpUT91PuXP0RMuJx?p=preview

Essentially, you can get the old behavior back by changing the JavaScript to use the transcludeFn function in a separate directive. See below my updated code:

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

function MyCtrl($scope) {

}

myApp.directive('myDirective', function(){
    return{
        transclude: true,
        template: '<div class="something" ng-transclude-append> This is my directive content</div>'      
    };
});

myApp.directive('ngTranscludeAppend', function() {
  return function(scope, element, attrs, ctrl, transcludeFn) {
      if (!transcludeFn) return;

      transcludeFn(function(clone) {
        element.append(clone);
      });
    };
});

Link to my updated jsbin: http://jsbin.com/IfejIWES/3/

One last note, I tried embedding the transcludeFn in my link function directly like:

link: function(scope, element, attrs, ctrl, transcludeFn) {          
  transcludeFn(function(clone) {
    element.append(clone);
  });
}

But this had the effect of creating the button and anchor twice. Moving it out into its own directive solved it for me.

Transclusion (true) - Combining values

2 Answers2