angularjs-directiveAan de slag met angularjs-richtlijn


Opmerkingen

AngularJS-richtlijnen zijn aangepaste elementen in HTML (zoals een attribuut, elementnaam, opmerking of CSS-klasse) die AngularJS vertellen om een bepaald gedrag aan dat DOM-element te koppelen, of zelfs om het DOM-element en de onderliggende elementen te transformeren. Kortom, wanneer we een richtlijn opstellen, zal AngularJS dat element anders behandelen.

Een herbruikbaar onderdeel bouwen

Richtlijnen kunnen worden gebruikt om herbruikbare componenten te bouwen. Hier is een voorbeeld van een component "gebruikersbox":

userBox.js

angular.module('simpleDirective', []).directive('userBox', function() {
  return {
    scope: {
        username: '=username',
        reputation: '=reputation'
    },
    templateUrl: '/path/to/app/directives/user-box.html'
  };
});
 

Controller.js

var myApp = angular.module('myApp', ['simpleDirective']);

myApp.controller('Controller', function($scope) {
    $scope.user = "John Doe";
    $scope.rep = 1250;
});
 

myPage.js

<html lang="en" ng-app="myApp">
  <head>
    <script src="/path/to/app/angular.min.js"></script>
    <script src="/path/to/app/controllers/Controller.js"></script>
    <script src="/path/to/app/directives/userBox.js"></script>
  </head>

  <body>
  
    <div ng-controller="Controller">
        <user-box username="user" reputation="rep"></user-box>
    </div>
    
  </body>
</html>
 

user-box.html

<div>{{username}}</div>
<div>{{reputation}} reputation</div>
 

Installatie of instellingen

Richtlijnen worden geleverd met de AngularJS-bibliotheek zelf. Een voorbeeldrichtlijn kan worden gemaakt als:

angular.module('simpleDirective', [])
.directive('helloData', function() {
  return {
    template: 'Hello, {{data}}'
  };
});
 

En kan worden gebruikt als:

JS:

angular.module('app', ['simpleDirective'])
.controller('Controller', ['$scope', function($scope) {
  $scope.data = 'World';
}])
 

HTML

<div ng-controller="Controller">
  <div hello-data></div>
</div>
 

Wordt samengesteld als:

Hallo Wereld

Pop-upbericht voor succes / fout met de eenvoudige koppelingsfunctie

Link-functie is de beste manier om in aangepaste richtlijnen DOM te manipuleren. Er zijn drie attributen nodig als invoer (bereik, element, attribuut) na elkaar

toepassingsgebied: het lokale toepassingsgebied van de richtlijn.

element: html-element waarop de richtlijn wordt gebruikt.

attribuut: het geeft toegang tot alle attributen die worden gebruikt in het element waarnaar wordt verwezen.

// on success call or similarly error, warning, info in controller
    $scope.message={
                text: "Saved Successfully",
                type: "SUCCESS"
                };    
                
    <user-info msg="message"> </user-info>   //in html



    var mainApp = angular.module("mainApp", []);
     mainApp.directive('userInfo', function() {
        var directive = {};
        directive.restrict = 'E';
        
        directive.scope = {
           message : "=msg"
        },
        
        directive.link = function(scope, element, attributes) {
            if(scope.message.type==='SUCCESS')
              scope.message.text = 'SUCCESS: '+scope.message.text+' !';
            else if(scope.message.type==='ERROR')  
              scope.message.text = 'ERROR: '+scope.message.text+' !';
            else if(scope.message.type==='WARNING')  
              scope.message.text = 'WARNING: '+scope.message.text+' !'
            else if(scope.message.type==='INFO')  
              scope.message.text = 'INFO: '+scope.message.text+' !'
          
            element.on('click', function(event) {     //on click of div pop-up will smoothly close
                      $(this).fadeOut();   
                      });
           },
           directive.template = '<div ng-class={{message.type}}>'+            // one can create different bg-color as per type of message and width/height
                                '<div class="message-text">{{message.text}}<div>'+   //message text will be printed
                                '<div>';
           
        return directive;
     });
 

Je eerste richtlijn

Onze eerste elementrichtlijn zal niet veel doen: deze berekent alleen 2+2 en wordt in HTML als volgt genoemd:

<my-calculator></my-calculator>
 

Let op de naam van de richtlijn is myCalculator (in CamelCase), maar in html wordt het gebruikt als my-calculator (in het geval van lisp).

Omdat we willen dat onze richtlijn als html-element wordt gebruikt, zullen we restrict: 'E' .

Elke richtlijn heeft de sjabloon die wordt samengesteld en ingevoegd. Onze richtlijn is heel eenvoudig, dus we zullen onze HTML als string in een template invoegen.

// directives/my-calculator.js

angular.module('exampleApp', [])
.directive('myCalculator', function() {
  return {
    restrict: 'E',
    template: '<span> My directive can calculate 2+2: {{2+2}} </span>'
  };
});
 

HTML

<!DOCTYPE html>
<html ng-app="exampleApp">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="my-calculator.js"></script>
  </head>

  <body>
    Here is my first directive: 
    <my-calculator></my-calculator>
  </body>

</html>
 

Het resultaat ziet er als volgt uit:

Hier is mijn eerste richtlijn: Mijn richtlijn kan 2 + 2: 4 berekenen

Als je met het live-voorbeeld wilt spelen, ga dan naar plunkr .