angular.js: comment passer ngclick du dom original à dom de la directive?

Salut à tous, j'ai ce "confirmable" bouton de la directive qui je travaille,

Le code html qui va déclencher la directive "confirmable'

      <span confirmable ng-click='users.splice($index,1)'></span>

la directive: (coffeescript)

  angular.module('buttons',[])

  .directive 'confirmable', () ->
    template: """
      <button class='btn btn-mini btn-danger'>
        Destroy
      </button>
    """
    replace: yes

De sorte que le résultat final que j'aimerais voir généré avec cette directive est

      <button class='btn btn-mini btn-danger' ng-click='users.splice($index,1)'>
        Destroy
      </button>

Jusqu'à présent je l'ai eu à travailler avec une fonction de liaison à l'intérieur de la directive

  angular.module('buttons',[])

  .directive 'confirmable', () ->
    template: """
      <button class='btn btn-mini btn-danger'>
        Destroy
      </button>
    """
    replace: yes
    link: (scope, el, attrs) ->               <---------- linking function
      $(el).attr 'ng-click', attrs.ngClick

Mais je suis passé par la directive de la documentation, et que le champ d'application de la propriété avec l' =, @, & les opérateurs, mais je suis vraiment pas sûr si elles sont ce dont j'ai besoin. Puis il y a cette transclude propriétés qui j'ai encore besoin de comprendre mais pour le moment ne semble pas être très utile. Ainsi, alors que ma fonction de liaison de fait le truc pour l'instant, mais je pensais que je devrais demander à voir si angulaire fournit une solution plus élégante.

Merci!

source d'informationauteur Nik So | 2012-10-23

  1. 6

    Il me semble que vous voulez l'appeler une méthode d'un parent à l'intérieur de votre directive...

    J'ai mis en place un Débarquez ici

    (Désolé, j'aime le JavaScript... donc, ici, va)

    Ici vous êtes contrôleur de parent.

    app.controller('ParentCtrl', function($scope) {
    $scope.fooCalled = 0;
    $scope.foo = function() {
        $scope.fooCalled++;
    };
});

    Alors votre marque jusqu'

    <div ng-controller="ParentCtrl">
   Foo Called: {{fooCalled}}<br/>
   <button ng-click="foo()">Call From Parent</button><br/>
   <custom-control custom-click="foo()"></custom-control>
</div>

    Et votre directive déclaration:

    app.directive('customControl', function(){
   return {
     restrict: 'E',
     scope: {
        innerFoo: '&customClick'
     },
     template: '<button ng-click="innerFoo()">Call From Control</button>'
   };
});

    Le bit dans le scope déclaration dans votre directive définition est ce que les liens de la mère de la portée de la fonction de référence à votre de la directive, de sorte qu'il peut être appelé sur clic. C'est ce que l' & est pour.

  2. 1

    Vous le faites à droite. Les contrôleurs sont pour de partage de fonctionnalités communes entre les directives; vous n'en avez pas besoin ici. Aussi ce cas est si simple, vous n'avez même pas besoin d'une fonction de lien:

    http://jsfiddle.net/V7Kpb/12/

    De copier les attributs de directive sur le lien en scène ne fait rien dans la mesure Angulaire. Vous aurez juste un bouton avec une ng-click attribut, mais qui a été ajouté après Angulaire traité les DOM.

    Noter également, element comme deuxième paramètre de la fonction de lien est déjà jQLite (et sans doute plein de jQuery si vous avez lié en trop.) Pas besoin de jQuerify.

    Aussi, concernant isoler étendues ( = , @ et & que vous mentionnez). C'est une belle élégante de la syntaxe, mais le gros inconvénient est que toutes les autres directives sur le même élément se retrouver isolés du champ d'application trop. Donc, si vous voulez travailler avec ngModel qui est une chose commune à faire, vous ne pouvez pas utiliser un isolat portée. En fait, même dans ce cas, si vous utilisez un isolat portée ng-cliquez sur arrêter de travailler. Parce qu'il va essayer d'évaluer l'expression qui contient des choses pas déclaré explicitement dans le champ d'application{} la propriété.