Impostare le restrizioni di utilizzo in una direttiva custom con AngularJS

di Stefano Mostarda, in HTML5, AngularJS,

Nello script #154 abbiamo visto come creare una direttiva custom da utilizzare nel markup delle view. In quello script abbiamo usato la direttiva direttamente come se fosse un tag HTML, ma questo non è sempre l'utilizzo che ne dobbiamo fare. Infatti, come abbiamo visto in altri script, alcune direttive sono utilizzabili solo come attributi mentre in altri casi possono essere usate come commento HTML o come classe CSS.
Tutte queste opzioni sono specificabili nella proprietà restrict dell'oggetto restituito dalla direttiva come mostrato nel seguente esempio.

var app = angular.module("myApp", []);
  app.directive("My-Directive", function() {
    return {
      restrict: "EA" 
      template : "<h1>Direttiva</h1>"
    };
  });

La proprietà restrict può contenere i seguenti caratteri che possono essere cominati tra loro:

  • E: la direttiva può essere usata come elemento
  • A: la direttiva può essere usata come attributo
  • C: la direttiva può essere usata all'interno dell'attributo class
  • M: la direttiva può essere usata come commento

Nel prossimo esempio vediamo l'utilizzo della direttiva in base ai parametri appena elencati.

<my-directive></my-directive>
<div my-directive></div>
<div class="my-directive"></div>
<!-- directive: my-directive -->

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi