(function () {

  'use strict';

​

  angular.module('myApp', [])

​

  .directive('user',

    function user($compile, $window) {

      return {

        scope: {

          role: '@',

          name: '@'

        },

        restrict: 'EA',

​

        link: function link(scope, elem) {

​

          var roles = {

            SUPERADMIN: '<button ng-click="doSomething()" class="btn">Do something</button>',

            STUDENT: '<div class="alert alert-success">You are a student</div>',

            OTHER: '<div>Guest users have no options</div>'

          };

​

          // Create HTML elements in according with the role (SUPERADMIN, STUDENT, OTHER)

          var role = roles[scope.role] || roles.OTHER;

          var html = '<div><h2>' + scope.name + '</h2>' + role + '</div>';

​

          // Step 1: parse HTML into DOM element

          var template = angular.element(html);

          //console.log (html);

​

          // Step 2: compile the template

          var linkFn = $compile(template);

          //console.log (linkFn);

​

          // Step 3: link the compiled template with the scope.

          var element = linkFn(scope);

          console.log (element[0]);

​

          // Step 4: Append to DOM (optional)

          elem.append(element);

​

          scope.doSomething = function doSomething() {

            $window.alert('doSomething');

          };

​

        }

      };

    }

  );

​

})();

​