Angular.js

by Slava Fomin II

HTML

<div ng-app="MyApp">
    
    <a ng-href="{{ link.url }}" ng-if="showLink">
        <foo></foo>
    </a>
    
    <span ng-if="!showLink">
        <foo></foo>
    </span>
    
    <hr>
    
    <div>
        <input type="checkbox" ng-model="showLink">
        <pre>{{ showLink | json }}</pre>
    </div>
        
    <script type="text/ng-template" id="foo.html">
      {{ 'Hello' + ' ' + personName + '!' }}
    </script>
        
</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('foo', function () {
    return {
      restrict: 'E',
      templateUrl: 'foo.html',
      scope: false
    };
  })
;