Angular.js

by David Raynes

HTML

<div ng-app="MyApp">
    <a ng-href="{{ link.url }}" wrap-if="{{ showLink }}">
        {{ 'Hello' + ' ' + personName + '!' }}
    </a>
    <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',
      compile: function (tElement, tAttrs) {
            
        console.log('Compiling directive');
            
        return {
          pre: function preLink (scope, iElement, iAttrs, controller, transcludeFn) {
            console.log('Pre-linking function called');
          },
          post: function postLink (scope, iElement, iAttrs, controller, transcludeFn) {
            console.log('Post-linking function called');
          }
        };

      }
    };
  })
;