Angularjs Directives - EXEMPLOS Básico - Referência

ex1.js

//Reference: http://ng-learn.org/2014/01/Dom-Manipulations/

// Here we create a module to group these directives jquery related
    var jqueryDirectives = angular.module("jqueryDirectives", []);

    // Here we add a directive to the module. camelCase naming in this file (mySlide) and dash separated in html (my-Slide)
    jqueryDirectives.directive("mySlide", [
      function() {
        return {

          // This means the directive can be used as an attribute only. Example <div data-my-slide="variable"> </div>
          restrict: "A",

          // This is the functions that gets executed after Angular has compiled the html
          link: function(scope, element, attrs) {

            // We dont want to abuse on watch but here it is critical to determine if the parameter has changed.
            scope.$watch(attrs.mySlide, function(newValue, oldValue) {

              // This is our logic. If parameter is true slideDown otherwise slideUp.
              // TODO: This should be transformed into css transition or angular animator if IE family supports it
              if (newValue) {
                return element.slideDown();
              } else {
                return element.slideUp();
              }
            });
          }
        };
      }
    ]);
    
    <div class="search-details-form" data-my-slide="showRedoSearchDetails">