Comment appeler une fonction personnalisée depuis html avec angularjs?

Question

Je voudrais définir des méthodes distinctes dans mes js contrôleurs comme suit:

angular.module('test').controller('mycontroller', mycontroller); 
    function mycontroller() { 
     //do sth 
    }; 

    function test(value) { 
     console.log(value); //this is never written 
    }; 

De cette façon, j'aurais une structure propre et chaque méthode séparée dans son propre bloc. Mais quand j'essaie de l'utiliser comme suit, il n'y a pas de sortie.

<div ng-controller='mycontroller'> 
    {{test('printme')}} 
</div> 

Pourquoi?

Answer 1

Si vous voulez conserver les fichiers à la recherche propre, vous pouvez suivre John Papa guide de style: https://github.com/johnpapa/angular-styleguide

Voici comment je fixe votre question et appliqué une approche propre à elle: http://plnkr.co/edit/tYYvssVWUfvHyXE8ilD8?p=preview

angular.module('testApp', []) 
    .controller('ctrl', ctrl); 

function ctrl($scope) { 
    /* -- Public Properties & Methods -- */ 

    $scope.test = test; 


    /* -- Private Properties & Methods -- */ 

    function test(value) { 
    console.log(value); 
    } 
} 

Parce que mon code est dans une Ia vie, vous pouvez avoir en fait que function test partout à l'intérieur de ce bloc, au lieu d'avoir à l'intérieur de la fonction de contrôleur:

angular.module('testApp', []) 
    .controller('ctrl', ctrl); 

function ctrl($scope) { 
    /* -- Public Properties & Methods -- */ 

    $scope.test = test; 
} 

/* -- Private Properties & Methods -- */ 
function test(value) { 
    console.log(value); 
} 

http://plnkr.co/edit/VXbOuOvHaIhRFBVZD16p?p=preview

Je viens d'avoir un pensé à faire cela selon la deuxième façon. Une bonne quantité de fois nous créons des variables que nous souhaitons lier au DOM: $scope.showOptions. Si nous avons la fonction en dehors du contrôleur, nous n'avons plus accès à ce $scope.showOptions donc vous auriez "de la difficulté" à l'interroger. Vous pouvez facilement contourner ce problème en demandant les variables/scope via le paramètre function. Ou créer une petite fonction wrapper qui sera envoyée (presque comme un double dispatching).

$scope.test = function test() { testImpl($scope.showOptions); }; 

function testImpl(showOptions) { 
    console.log(showOptions); 
} 

Cela vous permettra de garder tous vos principaux soulever des objets lourds en dehors du contrôleur, mais n'introduire une nouvelle couche de complexité, une que je sais que je pourrais certainement faire sans.

Donc le choix vous appartient.

Answer 2

Essayez de mettre votre fonction de test à l'intérieur de votre contrôleur, et changer à

$scope.test = function(value){ 
    console.log(value) 
}; 

également ajouter $ la dépendance portée à votre contrôleur