How to toggle template usage in an AngularJS directive?

Question

I have a custom directive that uses template and ng-transclude. An incoming event should toggle the usage of directive template. If templating is enabled the directive should be rendered 'normal', but if templating is disabled then just the transcluded content should be displayed.

How do I extend the directive to achive this behavior?

You can find the whole example on http://plnkr.co/edit/tKag6y.

<custom-directive>
  <label>Name:</label>
  <input text="text" ng-model="yourName" placeholder="Enter a name here">
  <hr>
  <h1>Hello {{yourName}}!</h1>
</custom-directive>

.directive('customDirective', ['$rootScope',
  function($rootScope) {

    return {
      restrict: 'E',
      transclude: true,
      replace: true,
      scope: {},
      controller: function($scope, $element) {
        $scope.edit = function() {
          alert('Edit content!');
        }

        $rootScope.$on('toggleMenu.enableEditMode', function() {
          alert('Edit mode: Enable template!');

          // How to update the directive here?
        });

        $rootScope.$on('toggleMenu.disableEditMode', function() {
          alert('View mode: Disable template!');

          // How to update the directive here?
        });
      },
      template: '<div class="panel panel-default">' +
        '<div class="panel-body" ng-transclude></div>' +
        '<div class="panel-footer">' +
        '<button class="btn btn-warning" ng-click="edit()"><span class="glyphicon glyphicon-pencil"></span>&nbsp;Edit</button>' +
        '</div></div>'
    };
  }
])