Dove mettere una funzione di supporto nella direttiva angolare?

Question

Ho creato una semplice direttiva:

angular.module("foo").directive('bar',function(){ 
    return { 
     ... 
     template: 
      '<div> \ 
       <div ng-hide="param1.length == 0 && param2...">...</div> \ 
       <input ng-show="param1.length == 0 && param2..." .../> \ 
      </div>', 
     scope: { 
      param1: '=', 
      param2: '=' 
     } 
    }; 
}); 

ma c'è una complessa logica duplicato all'interno del modello in modo vorrei estrarre in una funzione e basta chiamare quella funzione da un modello. Dove posso inserire tale funzione e come posso invocarla? Devo creare un controller dedicato?

Answer 1

Nella funzione di collegamento:

return { 
    ..., 
    template: '<div><div ng-hide="foo()">...</div></div>', 
    link: function(scope) { 
     scope.foo = function() { 
      return scope.param1.length == 0 && ...; 
     }; 
    } 
}; 

Answer 2

si utilizza dichiarare servizi per raggiungere questo obiettivo in angolare. Da documenti angolari (https://docs.angularjs.org/guide/services)

servizi angolari sono oggetti sostituibili che sono collegati insieme mediante iniezione di dipendenza (DI). Puoi utilizzare i servizi per organizzare e il codice di condivisione nella tua app.

Answer 3

Ecco un metodo semplice, compatto e facile da capire che utilizzo.
Innanzitutto, aggiungi un servizio nel tuo js.

app.factory('Helpers', [ function() { 
     // Helper service body 

     var o = { 
     Helpers: [] 

     }; 

     // Dummy function with parameter being passed 
     o.getFooBar = function(para) { 

      var valueIneed = para + " " + "World!"; 

      return valueIneed; 

      }; 

     // Other helper functions can be added here ... 

     // And we return the helper object ... 
     return o; 

    }]); 

Poi, nel controller, iniettare l'oggetto di supporto e utilizzare qualsiasi funzione disponibile con qualcosa di simile a quanto segue:

app.controller('MainCtrl', [ 

'$scope', 
'Helpers', 

function($scope, Helpers){ 

    $scope.sayIt = Helpers.getFooBar("Hello"); 
    console.log($scope.sayIt); 

}]);