Come posso passare più attributi in una direttiva di attributo Angular.js?

Question

Ho una direttiva attributo limitato come segue:

restrict: "A" 

ho bisogno di passare in due attributi; un numero e una funzione/richiamata, accedendovi all'interno della direttiva utilizzando l'oggetto attrs.

Se la direttiva fosse una direttiva elemento, ristretta con "E" ho potuto per questo:

<example-directive example-number="99" example-function="exampleCallback()"> 

Tuttavia, per ragioni che non entrerò nei devo la direttiva di essere una direttiva attributo.

Come si passano più attributi in una direttiva di attributo?

Answer 1

La direttiva può accedere qualsiasi attributo definito sullo stesso elemento, anche se la direttiva stessa non è l'elemento.

Template:

<div example-directive example-number="99" example-function="exampleCallback()"></div> 

direttiva:

app.directive('exampleDirective ', function() { 
    return { 
     restrict: 'A', // 'A' is the default, so you could remove this line 
     scope: { 
      callback : '&exampleFunction', 
     }, 
     link: function (scope, element, attrs) { 
      var num = scope.$eval(attrs.exampleNumber); 
      console.log('number=',num); 
      scope.callback(); // calls exampleCallback() 
     } 
    }; 
}); 

fiddle

Se sarà hard-coded il valore dell'attributo example-number, io suggerisco di usare $eval una volta, e la conservazione valore. La variabile num avrà il tipo corretto (un numero).

Answer 2

Lo si fa esattamente come con una direttiva elemento. Li avrete nell'oggetto attrs, il mio campione li ha vincolati a due vie tramite l'ambito isolato, ma non è necessario. Se si utilizza un ambito isolato, è possibile accedere agli attributi con scope.$eval(attrs.sample) o semplicemente scope.sample, ma potrebbero non essere definiti al collegamento a seconda della situazione.

app.directive('sample', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      'sample' : '=', 
      'another' : '=' 
     }, 
     link: function (scope, element, attrs) { 
      console.log(attrs); 
      scope.$watch('sample', function (newVal) { 
       console.log('sample', newVal); 
      }); 
      scope.$watch('another', function (newVal) { 
       console.log('another', newVal); 
      }); 
     } 
    }; 
}); 

utilizzati come:

<input type="text" ng-model="name" placeholder="Enter a name here"> 
<input type="text" ng-model="something" placeholder="Enter something here"> 
<div sample="name" another="something"></div> 

Answer 3

Questo ha funzionato per me e penso che sia più conforme a HTML5. Si dovrebbe cambiare il tuo html per utilizzare il prefisso 'dati-'

<div data-example-directive data-number="99"></div> 

E all'interno della direttiva leggere il valore della variabile:

scope: { 
     number : "=", 
     .... 
    }, 

Answer 4

Si potrebbe passare un oggetto come attributo e leggerlo nella direttiva come questa :

<div my-directive="{id:123,name:'teo',salary:1000,color:red}"></div> 

app.directive('myDirective', function() { 
    return {    
     link: function (scope, element, attrs) { 
      //convert the attributes to object and get its properties 
      var attributes = scope.$eval(attrs.myDirective);  
      console.log('id:'+attributes.id); 
      console.log('id:'+attributes.name); 
     } 
    }; 
}); 

Answer 5

Se "bisogno" 'exampleDirective' da un'altra direttiva + la logica è nel controllore 'di exampleDirective' (diciamo 'exampleCtrl'):

0.123.

app.directive('exampleDirective', function() { 
    return { 
     restrict: 'A', 
     scope: false, 
     bindToController: { 
      myCallback: '&exampleFunction' 
     }, 
     controller: 'exampleCtrl', 
     controllerAs: 'vm' 
    }; 
}); 
app.controller('exampleCtrl', function() { 
    var vm = this; 
    vm.myCallback(); 
});