Angular Directives

simple custom built directive

by JuanMa Garrido

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script>
<body ng-app="myApp">
  <div ng-controller="DirectiveController">
      <div my-hello></div>
      <whatever></whatever>
      <userinfo user="{firstName:'John',lastName:'Lennon'}"></userinfo>
      <userinfo user="ringo"></userinfo>
  </div>
  <div ng-controller="MyController" >
    <userinfo2>This will be replaced</userinfo2>
    <mytransclude>This is a transcluded directive {{firstName}}</mytransclude>
  </div>
  <div ng-controller="MyControllerExtra" >
    <userinfo3>This will be replaced</userinfo3>
    <mytransclude>This is a transcluded directive {{firstName}}</mytransclude>
  </div>

</body>

<!-- http://tutorials.jenkov.com/angularjs/custom-directives.html -->

CSS

.line-through { text-decoration: line-through; }
.arrow::before { content: "\279c "; } 
.notificationDiv, .notificationDivExtra  { padding:0 20px; font-size:2em; }
.notificationDivExtra { color:#FFF; }
div[my-hello] {
  background: green; color:#FFF;
}
whatever {
  background: yellow;
  display: block;
}
userinfo {
  background: blue; color:#FFF;
  display: block;
}

JavaScript

// App module
angular.module('myApp', ['myControllers','myDirectives']);

// Directives module
angular.module('myDirectives', [])
  // directive <div my-hello>
	.directive('myHello', function() {
    return {
      template: '<div>Hello world! I am {{ user.name }}</div>',
      restrict: 'AE'
    };
  })
  // directive <whatever>
  .directive('whatever', function() {
    var directive = {};
    directive.restrict = 'E'; /* restrict this directive to elements */
    directive.template = "My first directive: {{ textToInsert }}";
    return directive;
	})
    // directive <whatever>
  .directive('userinfo', function() {
    var directive = {};
    directive.restrict = 'E';
    directive.template = "User : {{user.firstName}} {{user.lastName}}";
    directive.scope = {
        user : "=user"
    }
    directive.compile = function(element, attributes) {
        // do one-time configuration of element.
        console.log(element, attributes);
				element.addClass("arrow");
        var linkFunction = function($scope, element, atttributes) {
            // bind element to data in $scope
            console.log($scope, element, atttributes);
						element
          		.append("<p>pop start</p>")
          			.children("p")
            		.addClass("line-through")
        }
        return linkFunction;
    }
    return directive;
	})
  .directive('userinfo2', function() {
        var directive = {};
        directive.restrict = 'E'; /* restrict this directive to elements */
        directive.compile = function(element, attributes) {
            element.css("border", "1px solid #cccccc");
            var linkFunction = function($scope, element, attributes) {
                element.html("This is the new content: " + $scope.firstName);
                element.css("background-color", "#ffff00");
                element.addClass($scope.cssClass);
            }
            return linkFunction;
        }
        return directive;
    })
  	.directive('userinfo3', function() {
    ...