Angular.js

HTML

<div ng-app="MyApp">
    <div wrap-if="showLink" url="link.url">
        {{ 'Hello' + ' ' + personName + '!' }}
    </div>
    <div>
        <input type="checkbox" ng-model="showLink">
        <pre>{{ showLink | json }}</pre>
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<style>
a {
    display: block;
    font-size: 20px;
    margin: 20px 0;
}

JavaScript

angular
  .module('MyApp', [])
  .run(function ($rootScope) {
    $rootScope.showLink = true;
    $rootScope.personName = 'John';
    $rootScope.link = {
      url: 'http://www.example.com/'
    };
  })
  .directive('wrapIf', function () {
    return {
      restrict: 'A',
      transclude: true,
      scope: {
        condition: '=wrapIf',
        url: '='
      },
      template: '<a ng-if="condition === true" ng-href="{{url}}"><ng-transclude></ng-transclude></a><p ng-if="condition === false"><ng-transclude></ng-transclude></p>'
    };
  })
;