AngularJS => Aangepaste richtlijnen

Invoering

Hier leert u meer over de functie Directives van AngularJS. Hieronder vindt u informatie over wat richtlijnen zijn, evenals basis- en geavanceerde voorbeelden van het gebruik ervan.

parameters

Parameter	Details
strekking	Eigenschap om het toepassingsgebied van de richtlijn te bepalen. Het kan worden ingesteld als false, true of als een geïsoleerde scope: {@, =, <, &}.
toepassingsgebied: vals	Richtlijn maakt gebruik van bovenliggende reikwijdte. Geen ruimte gecreëerd voor richtlijn.
scope: waar	Richtlijn neemt de reikwijdte van de ouder prototypisch over als een nieuwe reikwijdte. Als er meerdere richtlijnen voor hetzelfde element zijn die om een nieuwe scope vragen, dan zullen ze één nieuwe scope delen.
bereik: {@}	Eenzijdige binding van een eigenschap van een richtlijnbereik aan een DOM-kenmerkwaarde. Omdat het kenmerk in het bovenliggende element wordt gebonden, verandert het in het richtlijnbereik.
bereik: {=}	Bi-directionele attribuutbinding die het attribuut in het bovenliggende element verandert als het richtlijnkenmerk verandert en vice versa.
bereik: {<}	Eenzijdige binding van een eigenschap van het richtlijnbereik en een DOM-kenmerkuitdrukking. De uitdrukking wordt geëvalueerd in het bovenliggende element. Hiermee wordt de identiteit van de bovenliggende waarde bekeken, zodat wijzigingen in een objecteigenschap in de bovenliggende waarde niet worden weerspiegeld in de richtlijn. Wijzigingen in een objecteigenschap in een richtlijn worden weerspiegeld in het bovenliggende element, aangezien beide naar hetzelfde object verwijzen
bereik: {&}	Hiermee kan de richtlijn gegevens doorgeven aan een uitdrukking die moet worden geëvalueerd in het bovenliggende item.
compileren: functie	Deze functie wordt gebruikt om DOM-transformatie uit te voeren op de richtlijnsjabloon voordat de koppelingsfunctie wordt uitgevoerd. Het accepteert `tElement` (het richtlijnsjabloon) en `tAttr` (lijst met attributen die op de richtlijn zijn vermeld). Het heeft geen toegang tot de scope. Het kan een functie retourneren die zal worden geregistreerd als een `post-link` of het kan een object retourneren met `pre` en `post` eigenschappen waarmee wordt geregistreerd als de `pre-link` en `post-link` functies.
link: functie / object	De koppelingseigenschap kan worden geconfigureerd als een functie of object. Het kan de volgende argumenten ontvangen: scope (richtlijn scope), iElement (DOM-element waar richtlijn wordt toegepast), iAttrs (verzameling DOM-elementattributen), controller (array van controllers vereist door richtlijn), transcludeFn. Het wordt voornamelijk gebruikt om DOM-luisteraars in te stellen, modeleigenschappen te bekijken voor wijzigingen en de DOM bij te werken. Het wordt uitgevoerd nadat de sjabloon is gekloond. Het wordt onafhankelijk geconfigureerd als er geen compileerfunctie is.
pre-link functie	Koppelingsfunctie die wordt uitgevoerd vóór alle onderliggende koppelingsfuncties. Standaard worden onderliggende directiefuncties uitgevoerd voordat de directieve directiefuncties worden gekoppeld en met de pre-linkfunctie kan de ouder eerst koppelen. Eén use case is als het kind gegevens van de ouder nodig heeft.
post-link functie	Koppelingsfunctie die leidinggevenden na onderliggende elementen worden gekoppeld aan bovenliggend element. Het wordt meestal gebruikt voor het koppelen van gebeurtenishandlers en voor toegang tot onderliggende richtlijnen, maar gegevens die vereist zijn door de onderliggende richtlijn moeten hier niet worden ingesteld omdat de onderliggende richtlijn al is gekoppeld.
restrict: string	Bepaalt hoe de richtlijn moet worden aangeroepen vanuit het DOM. Mogelijke waarden (ervan uitgaande dat onze richtlijnnaam `demoDirective` ): `E` - Elementnaam ( `<demo-directive></demo-directive>` ), `A` - Attribuut ( `<div demo-directive></div>` ), `C` - Bijpassende klasse ( `<div class="demo-directive"></div>` ), `M` - Op commentaar ( `<!-- directive: demo-directive -->` ). De eigenschap `restrict` kan ook meerdere opties ondersteunen, bijvoorbeeld - `restrict: "AC"` beperkt de richtlijn tot kenmerk OF klasse . Indien weggelaten, is de standaardwaarde `"EA"` (element of kenmerk).
vereisen: 'demoDirective'	Zoek de controller van demoDirective op het huidige element en injecteer de controller als het vierde argument voor de koppelingsfunctie. Gooi een fout indien niet gevonden.
vereisen: '? demoDirective'	Probeer de controller van demoDirective te vinden of geef de link fn door als deze niet wordt gevonden.
vereisen: '^ demoDirective'	Zoek de controller van demoDirective door het element en de ouders te zoeken. Gooi een fout indien niet gevonden.
vereisen: '^^ demoDirective'	Zoek de controller van demoDirective door de ouders van het element te zoeken. Gooi een fout indien niet gevonden.
vereisen: '? ^ demoDirective'	Probeer de controller van demoDirective te vinden door het element en de ouders te zoeken of geef nul door aan de link fn als deze niet wordt gevonden.
vereisen: '? ^^ demoDirective'	Probeer de controller van demoDirective te vinden door de ouders van het element te zoeken of geef nul door aan de link fn als deze niet wordt gevonden.

Aangepaste richtlijnen maken en gebruiken

Richtlijnen zijn een van de krachtigste functies van angularjs. Aangepaste angularjs-richtlijnen worden gebruikt om de functionaliteit van HTML uit te breiden door nieuwe HTML-elementen of aangepaste kenmerken te maken om bepaald gedrag aan een HTML-tag te geven.

directive.js

// Create the App module if you haven't created it yet
var demoApp= angular.module("demoApp", []);

// If you already have the app module created, comment the above line and create a reference of the app module
var demoApp = angular.module("demoApp"); 


// Create a directive using the below syntax
// Directives are used to extend the capabilities of html element 
// You can either create it as an Element/Attribute/class      
// We are creating a directive named demoDirective. Notice it is in CamelCase when we are defining the directive just like ngModel
// This directive will be activated as soon as any this element is encountered in html

demoApp.directive('demoDirective', function () {
    
  // This returns a directive definition object
  // A directive definition object is a simple JavaScript object used for configuring the directive’s behaviour,template..etc
  return {
    // restrict: 'AE', signifies that directive is Element/Attribute directive, 
    // "E" is for element, "A" is for attribute, "C" is for class, and "M" is for comment. 
    // Attributes are going to be the main ones as far as adding behaviors that get used the most.
    // If you don't specify the restrict property it will default to "A"
    restrict :'AE',  

    // The values of scope property decides how the actual scope is created and used inside a directive. These values can be either “false”, “true” or “{}”. This creates an isolate scope for the directive.
    // '@' binding is for passing strings. These strings support {{}} expressions for interpolated values.
    // '=' binding is for two-way model binding. The model in parent scope is linked to the model in the directive's isolated scope.
    // '&' binding is for passing a method into your directive's scope so that it can be called within your directive. 
    // The method is pre-bound to the directive's parent scope, and supports arguments.
    scope: { 
      name: "@",  // Always use small casing here even if it's a mix of 2-3 words
    },                  

    // template replaces the complete element with its text. 
    template: "<div>Hello {{name}}!</div>",
                
    // compile is called during application initialization. AngularJS calls it once when html page is loaded.
    compile: function(element, attributes) {
      element.css("border", "1px solid #cccccc");
                    
      // linkFunction is linked with each element with scope to get the element specific data.
      var linkFunction = function($scope, element, attributes) {
        element.html("Name: <b>"+$scope.name +"</b>");
        element.css("background-color", "#ff00ff");
      };
      return linkFunction;
    }
  };
});

Deze richtlijn kan vervolgens in de App worden gebruikt als:

<html>
   
   <head>
      <title>Angular JS Directives</title>
   </head>
   <body>
   <script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   <script src="directive.js"></script>   
    <div ng-app = "demoApp">
       <!-- Notice we are using Spinal Casing here -->  
       <demo-directive name="World"></demo-directive>
     
      </div>
   </body>
</html>

Richtlijn Definitie Object Template

demoApp.directive('demoDirective', function () {
  var directiveDefinitionObject = {
    multiElement:  
    priority:
    terminal:
    scope: {},  
    bindToController: {},
    controller:
    controllerAs:
    require:
    restrict:
    templateNamespace:
    template:
    templateUrl:
    transclude:
    compile: 
    link: function(){}                                  
  };
  return directiveDefinitionObject;
});

multiElement - ingesteld op true en alle DOM-knooppunten tussen het begin en einde van de naam van de richtlijn worden verzameld en gegroepeerd als richtlijnelementen
priority - maakt specificatie mogelijk van de volgorde om richtlijnen toe te passen wanneer meerdere richtlijnen op een enkel DOM-element zijn gedefinieerd. Richtlijnen met hogere nummers worden eerst samengesteld.
terminal - ingesteld op true en de huidige prioriteit is de laatste reeks uit te voeren richtlijnen
scope - bepaalt het toepassingsgebied van de richtlijn
bind to controller - bindt scopeigenschappen rechtstreeks aan directieve controller
controller - controller constructor functie
require - vereist een andere richtlijn en injecteert de controller als het vierde argument voor de koppelingsfunctie
controllerAs - naamverwijzing naar de controller in het richtlijnbereik zodat naar de controller kan worden verwezen vanuit de richtlijnsjabloon.
restrict - beperk de richtlijn tot element, kenmerk, klasse of opmerking
templateNameSpace - stelt het documenttype in dat wordt gebruikt door de richtingssjabloon: html, svg of math. html is de standaard
template - html markup die standaard de inhoud van het element van de richtlijn vervangt, of de inhoud van het richtlijnelement verpakt als transclude waar is
templateUrl - URL die asynchroon is opgegeven voor de sjabloon
transclude - Extraheer de inhoud van het element waar de richtlijn verschijnt en stel deze beschikbaar aan de richtlijn. De inhoud is samengesteld en aan de richtlijn verstrekt als transclusiefunctie.
compile - functie om de sjabloon DOM te transformeren
link - alleen gebruikt als de compileereigenschap niet is gedefinieerd. De koppelingsfunctie is verantwoordelijk voor het registreren van DOM-luisteraars en voor het bijwerken van de DOM. Het wordt uitgevoerd nadat de sjabloon is gekloond.

Voorbeeld basisrichtlijn

superman-directive.js

angular.module('myApp', [])
  .directive('superman', function() {
    return {
      // restricts how the directive can be used
      restrict: 'E',
      templateUrl: 'superman-template.html',
      controller: function() {
        this.message = "I'm superman!"
      },
      controllerAs: 'supermanCtrl',
      // Executed after Angular's initialization. Use commonly 
      // for adding event handlers and DOM manipulation
      link: function(scope, element, attributes) {
        element.on('click', function() {
          alert('I am superman!')
        });
      }
    }
  });

superman-template.html

<h2>{{supermanCtrl.message}}</h2>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  <script src="superman-directive.js"><script/>
</head>
<body>
<div ng-app="myApp">
  <superman></superman>
</div>
</body>
</html>

U kunt meer lezen over de restrict en link functies van de richtlijn in de officiële documentatie van AngularJS over richtlijnen

Hoe een herstelbaar onderdeel te maken met behulp van de richtlijn

AngularJS-richtlijnen bepalen de weergave van de HTML in een AngularJS-toepassing. Ze kunnen een HTML-element, kenmerk, klasse of opmerking zijn. Richtlijnen worden gebruikt om de DOM te manipuleren, nieuw gedrag aan HTML-elementen te koppelen, gegevensbinding en nog veel meer. Enkele voorbeelden van richtlijnen die Angular biedt, zijn ng-model, ng-hide, ng-if.

Evenzo kan iemand zijn eigen aangepaste richtlijn maken en deze opnieuw beschikbaar maken. Voor het maken van aangepaste richtlijnen Referentie . Het idee achter het maken van herbruikbare richtlijnen is om een reeks richtlijnen / componenten te maken die door u zijn geschreven, net zoals angularjs ons voorziet met angular.js. Deze herbruikbare richtlijnen kunnen met name zeer nuttig zijn wanneer u een reeks toepassingen / toepassingen hebt die een consistent gedrag, uiterlijk en gevoel vereisen. Een voorbeeld van een dergelijk herbruikbaar onderdeel kan een eenvoudige werkbalk zijn die u in uw toepassing of verschillende toepassingen wilt gebruiken, maar u wilt dat ze zich hetzelfde gedragen of er hetzelfde uitzien.

Maak eerst een map met de naam resuableComponents in de map van uw app en maak herbruikbare ModuleApp.js

reusableModuleApp.js:

(function(){

 var reusableModuleApp = angular.module('resuableModuleApp', ['ngSanitize']);

 //Remember whatever dependencies you have in here should be injected in the app module where it is intended to be used or it's scripts should be included in your main app  
                               //We will be injecting ng-sanitize

 resubaleModuleApp.directive('toolbar', toolbar)

 toolbar.$inject=['$sce'];

 function toolbar($sce){

     return{ 
     restrict :'AE',
        //Defining below isolate scope actually provides window for the directive to take data from app that will be using this.
        scope : {
                value1: '=',
                value2: '=',
                },

         }
     template : '<ul>  <li><a ng-click="Add()" href="">{{value1}}</a></li>  <li><a ng-click="Edit()" href="#">{{value2}}</a></li> </ul> ',
         link : function(scope, element, attrs){
           
              //Handle's Add function
              scope.Add = function(){


              };

              //Handle's Edit function
              scope.Edit = function(){

              };
     }
  }

});

mainApp.js:

(function(){
   var mainApp = angular.module('mainApp', ['reusableModuleApp']); //Inject resuableModuleApp in your application where you want to use toolbar component
   
   mainApp.controller('mainAppController', function($scope){
      $scope.value1 = "Add";
      $scope.value2 = "Edit"; 
   
   });
 
 });

index.html:

 <!doctype html>
 <html ng-app="mainApp">
 <head>
  <title> Demo Making a reusable component
 <head>
  <body ng-controller="mainAppController">
   
     <!-- We are providing data to toolbar directive using mainApp'controller -->
     <toolbar value1="value1" value2="value2"></toolbar>
  
    <!-- We need to add the dependent js files on both apps here -->
     <script src="js/angular.js"></script>
     <script src="js/angular-sanitize.js"></script>
    
     <!-- your mainApp.js should be added afterwards --->
      <script src="mainApp.js"></script>

     <!-- Add your reusable component js files here -->
      <script src="resuableComponents/reusableModuleApp.js"></script>

  </body>
 </html>

Richtlijnen zijn standaard herbruikbare componenten. Wanneer u richtlijnen in een afzonderlijke hoekmodule maakt, wordt deze in feite exporteerbaar en herbruikbaar in verschillende angularJs-toepassingen. Nieuwe richtlijnen kunnen eenvoudig worden toegevoegd in herbruikbare ModuleApp.js en herbruikbare Module Module kunnen een eigen controller, services, DDO-object binnen de richtlijn hebben om het gedrag te definiëren.

Basisrichtlijn met sjabloon en een geïsoleerde scope

Door een aangepaste richtlijn met geïsoleerde scope te maken, wordt de scope binnen de richtlijn gescheiden van de externe scope, om te voorkomen dat onze richtlijn per ongeluk de gegevens in de bovenliggende scope wijzigt en wordt voorkomen dat privégegevens uit de bovenliggende scope worden gelezen.

Om een geïsoleerde scope te maken en toch onze aangepaste richtlijn te laten communiceren met de externe scope, kunnen we de scope optie gebruiken die beschrijft hoe de bindingen van de interne scope van de richtlijn in kaart kunnen worden gebracht met de externe scope.

De eigenlijke bindingen zijn gemaakt met extra attributen die aan de richtlijn zijn gekoppeld. De bindende instellingen worden gedefinieerd met de scope en een object met sleutel / waarde-paren:

Een sleutel die overeenkomt met de geïsoleerde scope-eigenschap van onze richtlijn

Een waarde die Angular vertelt hoe de interne reikwijdte van de richtlijn wordt gekoppeld aan een overeenkomend kenmerk

Eenvoudig voorbeeld van een richtlijn met een geïsoleerde reikwijdte:

var ProgressBar = function() {
  return {
    scope: { // This is how we define an isolated scope
      current: '=', // Create a REQUIRED bidirectional binding by using the 'current' attribute
      full: '=?maxValue' // Create an OPTIONAL (Note the '?'): bidirectional binding using 'max-value' attribute to the `full` property in our directive isolated scope 
    }
    template: '<div class="progress-back">' +
              '  <div class="progress-bar"' +
              '       ng-style="{width: getProgress()}">' +
              '  </div>' + 
              '</div>',
    link: function(scope, el, attrs) {
      if (scope.full === undefined) {
        scope.full = 100;
      }
      scope.getProgress = function() {
        return (scope.current / scope.size * 100) + '%';
      }
    }
  }
}

ProgressBar.$inject = [];
angular.module('app').directive('progressBar', ProgressBar);

Voorbeeld van het gebruik van deze richtlijn en het binden van gegevens uit het bereik van de controller aan het interne bereik van de richtlijn:

controller:

angular.module('app').controller('myCtrl', function($scope) {
    $scope.currentProgressValue = 39;
    $scope.maxProgressBarValue = 50;
});

Visie:

<div ng-controller="myCtrl">
    <progress-bar current="currentProgressValue"></progress-bar>
    <progress-bar current="currentProgressValue" max-value="maxProgressBarValue"></progress-bar>
</div>

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;

    $scope.user2 = "Andrew";
    $scope.rep2 = 2850;

});

myPage.js

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

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

user-box.html

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

Het resultaat zal zijn:

John Doe
1250 reputation
Andrew
2850 reputation

Richtlijn decorateur

Soms hebt u mogelijk extra functies van een richtlijn nodig. In plaats van de richtlijn te herschrijven (kopiëren), kunt u het gedrag van de richtlijn wijzigen.

De decorateur wordt uitgevoerd tijdens de $ inject-fase.

Voer hiervoor een .config uit in uw module. De richtlijn heet myDirective, dus u moet myDirectiveDirective configureren. (dit in een hoekconventie [lees meer over providers]).

In dit voorbeeld wordt de templateUrl van de richtlijn gewijzigd:

angular.module('myApp').config(function($provide){
        $provide.decorator('myDirectiveDirective', function($delegate){
             var directive = $delegate[0]; // this is the actual delegated, your directive
             directive.templateUrl = 'newTemplate.html'; // you change the directive template
        return $delegate;
    })
});

Dit voorbeeld voegt een onClick-gebeurtenis toe aan het richtlijnelement wanneer erop wordt geklikt, dit gebeurt tijdens de compilatiefase.

angular.module('myApp').config(function ($provide) {
        $provide.decorator('myDirectiveTwoDirective', function ($delegate) {
            var directive = $delegate[0];
            var link = directive.link; // this is directive link phase
            directive.compile = function () { // change the compile of that directive
                return function (scope, element, attrs) {
                    link.apply(this, arguments); // apply this at the link phase
                    element.on('click', function(){ // when add an onclick that log hello when the directive is clicked.
                            console.log('hello!');
                    }); 
                };
            };
            return $delegate;
        });

    });

Een vergelijkbare aanpak kan worden gebruikt voor zowel providers als services.

Overerving van richtlijnen en interoperabiliteit

Hoekige js-richtlijnen kunnen worden genest of interoperabel worden gemaakt.

In dit voorbeeld stelt richtlijn Adir aan richtlijn Bdir zijn controller $ scope voor, omdat Bdir Adir vereist.

angular.module('myApp',[]).directive('Adir', function () {
        return {
            restrict: 'AE',
            controller: ['$scope', function ($scope) {
                    $scope.logFn = function (val) {
                            console.log(val);
                        }
                  }]
            }
    })

Zorg ervoor dat je vereist: '^ Adir' (kijk naar de hoekige documentatie, sommige versies vereisen geen ^ karakter).

.directive('Bdir', function () {
        return {
            restrict: 'AE',
            require: '^Adir', // Bdir require Adir
            link: function (scope, elem, attr, Parent) { 
            // Parent is Adir but can be an array of required directives.
                elem.on('click', function ($event) {
                    Parent.logFn("Hello!"); // will log "Hello! at parent dir scope
                    scope.$apply(); // apply to parent scope.
                });
            }
        }
    }]);

U kunt uw richtlijn op deze manier nesten:

<div a-dir><span b-dir></span></div>
<a-dir><b-dir></b-dir> </a-dir>

Is niet vereist dat richtlijnen zijn genest in uw HTML.

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

AngularJS
Aangepaste richtlijnen

Zoeken…