0

I encountered this error when trying to move clutter away into a directive.

function Ctrl($scope, $rootScope) {
}

angular.module('app', []);
    
angular
    .module('app')
    .directive('directive1', Directive1);

function Directive1() {
  return {
    transclude: true,
    restrict: 'E',
    replace: true,
    scope: true,
    template: '<ng-transclude></ng-transclude>'
  };
}

angular
    .module('app')
    .directive('directive2', Directive2);

function Directive2() {
  return {
    transclude: true,
    restrict: 'E',
    replace: true,
    scope: true,
    template: '<directive1>Some content from directive1 \
                  <ng-transclude></ng-transclude> \
              </directive1>'
  };
}

angular
    .module('app')
    .controller('ExampleController', ExampleController);
    
function ExampleController() {
  
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
    <directive2>
    Some content meant to deeply transclude into directive1
  </directive2>
  </div>

To me, it seems like a valid use case. Why would AngularJs not allow this? And is there any way this error can be overcome?

droidbot
  • 937
  • 1
  • 10
  • 26
  • It is because of your `replace: true`, which tries to replace the element twice – devqon Jan 31 '17 at 12:09
  • Are you sure @devqon? I tried removing one of those replaces, but the error still occurs. If you want to quickly try: http://jsfiddle.net/twn3k8y2/ – droidbot Jan 31 '17 at 12:16
  • If you do `replace: false` on directive2 it works: http://jsfiddle.net/twn3k8y2/3/ – devqon Jan 31 '17 at 12:26
  • umm.. thanks @devqon.. the error goes away, but the HTML emitted is not correct i.e., the resultant HTML is empty. Or am I missing something? – droidbot Jan 31 '17 at 12:41
  • 1
    Yeah there were some other errors (non-existing controller and old angular version). This jsfiddle works: http://jsfiddle.net/twn3k8y2/5/ – devqon Jan 31 '17 at 12:48
  • Brill.. thanks @devqon.. would you like to add this as an answer pls so I can mark it, so others can find an answer.. – droidbot Jan 31 '17 at 13:05
  • 1
    Well I didn't really answer your question, I just tweaked it a bit so it would work. I don't know exactly why angular won't allow this – devqon Jan 31 '17 at 13:06

0 Answers0