Directives in Angular JS

directive-compile.js

myapp.directive("searchResult",function(){
  return {
    restrict: "AECM",
    temlateUrl: "directives/searchResult.tpl.html",
    replace: true,
    scope: {
      studentName: "@",  // Symbol for creating a text hole
      studentObject: "=", // Symbol for object hole
      studentFunction: "&", // Symbol for function hole
    },
    compile: function(elem, attrs){
      console.log(elem);
      
      return {
        post: function(scope, elements, attrs){
          if (scope.studentObject.name === ""){
            elements.removeAttr('class');
          }
        };
      };
    }
  };
});

directive-directory.txt

-->directives
  -->searchResult
    -->searchResult.directive.js
    -->searchResult.tpl.html

directive-example.html

<h1>Results</h1>
<searchResults></searchResults>
<searchResults></searchResults>
<searchResults></searchResults>

directive-isolated-scope.js

myapp.directive("searchResult",function(){
  return {
    restrict: "AECM",
    temlateUrl: "directives/searchResult.tpl.html",
    replace: true,
    scope: {
      // This is now the model for our directive
    }
  };
});

directive-link.js

myapp.directive("searchResult",function(){
  return {
    restrict: "AECM",
    temlateUrl: "directives/searchResult.tpl.html",
    replace: true,
    scope: {
      studentName: "@",  // Symbol for creating a text hole
      studentObject: "=", // Symbol for object hole
      studentFunction: "&", // Symbol for function hole
    },
    link: function(scope, elements, attrs){
      if (scope.studentObject.name === ""){
        elements.removeAttr('class');
      }
    };
  };
});

directive-replace.js

myapp.directive("searchResult",function(){
  return {
    temlate: '<div><h3>name</h3><p>Description</p><p>Address</p></div>',
    replace: true
  };
});

directive-restrict.js

myapp.directive("searchResult",function(){
  return {
    restrict: 'AECM',
    temlate: '<div><h3>name</h3><p>Description</p><p>Address</p></div>',
    replace: true
  };
});

directive-structure.js

myapp.directive("searchResult",function(){
  return {
    temlate: '<div><h3>name</h3><p>Description</p><p>Address</p></div>'
  };
});

directive-template-url.js

myapp.directive("searchResult",function(){
  return {
    restrict: "AECM",
    temlateUrl: "directives/searchResult.tpl.html",
    replace: true
  };
});

directive-text-hole.html

<search-result 
    student-name={{student.name}} 
    student-object="student"
    student-function="studentFunction(param)">
</search-result>

directive-text-hole.js

myapp.directive("searchResult",function(){
  return {
    restrict: "AECM",
    temlateUrl: "directives/searchResult.tpl.html",
    replace: true,
    scope: {
      studentName: "@",  // Symbol for creating a text hole
      studentObject: "=", // Symbol for object hole
      studentFunction: "&", // Symbol for function hole
    }
  };
});

directive-transclusion.html

<search-result 
    student-name={{student.name}} 
    student-object="student"
    student-function="studentFunction(param)">
  <p>*Terms and Conditions Apply.</p>
</search-result>

directive-transclusion.js

myapp.directive("searchResult",function(){
  return {
    restrict: "AECM",
    temlateUrl: "directives/searchResult.tpl.html",
    replace: true,
    scope: {
      studentName: "@",  // Symbol for creating a text hole
      studentObject: "=", // Symbol for object hole
      studentFunction: "&", // Symbol for function hole
    },
    transclude: true
  };
});

normalization.html

<!-- This is wrong, it is standard for JS - camel case - but not for html-->
<searchResult someAttribute="#"></searchResult>

<!-- This is correct -->
<search-result some-attribute="#"></search-result>

repeat.html

<h1>Results</h1>
<div>
  <h3>name</h3>
  <p>Description</p>
  <p>Address</p>
</div>
<div>
  <h3>name</h3>
  <p>Description</p>
  <p>Address</p>
</div>
<div>
  <h3>name</h3>
  <p>Description</p>
  <p>Address</p>
</div>