Ajouter une méthode Angulaire de la directive?

Je suis en train de créer une directive qui permettrait d'améliorer un élément HTML. J'ai donc réussi à obtenir de la directive de courir et d'être associé à l'élément de Mon code actuel est quelque chose comme ceci:

angular.module('myModule', [])

    .directive('myDirective', function() {
        return {
            restrict: 'C',
            replace: false,
            scope: {},
            link: function(scope, element, attrs) {

            }
        }
    });

Maintenant, je tiens à ajouter de nouvelles méthodes pour l'élément HTML, par exemple je voudrais faire ceci:

//Pseudo code
myElement.reset();
myElement.reload(); //etc.

Quelle serait la meilleure façon d'ajouter ces méthodes à la directive?

Il n'est pas clair pour moi ce que vous voulez vraiment faire, mais vous ne mettez pas de fonctions sur l'élément HTML dans angulaire. Un lieu naturel pour définir les fonctions peuvent être dans la directive contrôleur de gestion, puis de les exposer à travers la directive $portée, ou peut-être le contrôleur lui-même - cela dépend vraiment de ce que vous voulez faire.
Plus ou moins la même question que la mienne stackoverflow.com/questions/34682739/.... Je suis toujours à la recherche d'une réponse satisfaisante. Si Artem réponse est "Angulaire façon", puis l'angle de la manière n'est pas une façon très agréable.

OriginalL'auteur laurent | 2013-04-16

  1. 6

    Ajouter de nouvelles méthodes d'éléments n'est pas l'angle. L'angle moyen serait de créer l'objet avec les champs, en passant à la directive et de regarder pour les modifications du champ à l'intérieur de la directive. Ici est simple exemple: http://plnkr.co/edit/5v5mN69Bu18jpnoGwYqj?p=preview

    OriginalL'auteur Artem

  2. 2

    Votre exemple de votre directive est très basique, donc je ne vois pas ce que vous voulez atteindre.
    Au moins, je peux dire: Vous pouvez définir de nouvelles fonctions comme des fonctions de la portée , par exemple

    ...
link: function(scope, element, attrs) {
    scope.reset = function() {
         //reset something
    }
    //...
}

    Si vous souhaitez accéder à des données chargées (par exemple pour l'utilisation de la fonction reload()) dans le champ d'application, vous devez écrire un contrôleur pour cette utilisation. de sorte que vous pouvez injecter un service en tant que source de données.
    La mise en œuvre de fonctions liés aux éléments directement est plus le jQuery de manière à ne pas le angularjs. Dans angularjs vous travaillez avec des étendues principalement.

    Peut-être vous fournir un exemple plus complet, au mieux, à l'aide de jsfiddle ou plnkr, je pense que c'est plus facile pour aider à voir votre utilisation ou de votre problème comme un morceau de code de travail.

    Je n'ai pas l'obtenir; en fonction de cette réponse: stackoverflow.com/a/15681173/1641941 c'est dommage de polluer le champ d'application avec les fonctions qui appartiennent à votre directive, mais je n'ai pas encore trouver où les ajouter et comment les appeler. Et d'autre réponse sauté dans une recherche google, mais ne répondez pas à ma question.
    ne vous inquiétez pas polluer le champ d'application, parce que vous avez scope: {} la directive a un isolé portée. Vous pouvez ajouter des fonctions à la portée en soit le lien ou le contrôleur.

    OriginalL'auteur Lutz

  3. 0

    Une façon d'ajouter ces méthodes à votre directive est de rendre la directive d'un contrôleur (aka une sous-vue). Le $scope param dans le contrôleur va vous donner bi-directionnelle d'accéder à la page HTML dans le template:

    Par exemple:

    .directive("myDirective", function() {

var controller = ['$scope', function teamCountCtrl ($scope)
{
    $scope.reset = function() {
       //modify $scope.obj
    };

    $scope.reload = function() {
       //modify $scope.obj
    };
}];

return {
    replace: true,
    templateUrl: 'js/directives/teamCount.html',
    scope: {
        obj: '='
    },
    controller: controller
}});

    Ensuite dans le modèle HTML, vous pouvez appeler reset() ou reload():

    <div>

<a tabindex=-1 class="btn" href="#" ng-click="reset()">
    <i class="fa fa-fw"></i>
</a>

<a tabindex=-1 class="btn" href="#" ng-click="reload()">
    <i class="fa fa-fw"></i>
</a>

    OriginalL'auteur paiego