Appeler une fonction de contrôleur à partir d'une directive sans portée isolée dans AngularJS

Je n'arrive pas à trouver un moyen d'appeler une fonction sur la portée parent à partir d'une directive sans utiliser la portée isolée. Je sais que si j'utilise une portée isolée, je peux simplement utiliser "&" dans la portée isolée pour accéder à la fonction sur la portée parente, mais l'utilisation de la portée isolée quand ce n'est pas nécessaire a des conséquences. Considérez le code HTML suivant:

<button ng-hide="hideButton()" confirm="Are you sure?" confirm-action="doIt()">Do It</button>

Dans cet exemple simple, je veux afficher une boîte de dialogue de confirmation JavaScript et n'appeler doIt () que s'ils cliquent sur "OK" dans la boîte de dialogue de confirmation. C'est simple en utilisant une portée isolée. La directive ressemblerait à ceci:

.directive('confirm', function () {
    return {
        restrict: 'A',
        scope: {
            confirm: '@',
            confirmAction: '&'
        },
        link: function (scope, element, attrs) {
            element.bind('click', function (e) {
                if (confirm(scope.confirm)) {
                    scope.confirmAction();
                }
            });
        }
    };
})

Mais le problème est que, parce que j'utilise une portée isolée, ng-hide dans l'exemple ci-dessus ne s'exécute plus contre la portée parente , mais plutôt dans la portée isolée (car l'utilisation d'une portée isolée sur n'importe quelle directive entraîne toutes les directives sur cet élément à utilisez la portée isolée). Voici un jsFiddle de l'exemple ci-dessus où ng-hide ne fonctionne pas. (Notez que dans ce violon, le bouton doit se cacher lorsque vous tapez "oui" dans la zone de saisie.)

L'alternative serait de NE PAS utiliser un champ d'application isolé , ce que je souhaite vraiment ici, car il n'est pas nécessaire que le champ d'application de cette directive soit isolé. Le seul problème que j'ai est, comment appeler une méthode sur la portée parent si je ne la transmets pas sur une portée isolée ?

Voici un jsfiddle où je n'utilise PAS de portée isolée et le ng-hide fonctionne bien, mais, bien sûr, l'appel à confirmAction () ne fonctionne pas, et je ne sais pas comment le faire fonctionner.

Veuillez noter que la réponse que je recherche vraiment est de savoir comment appeler des fonctions sur la portée externe SANS utiliser une portée isolée. Et je ne suis pas intéressé à faire fonctionner ce dialogue de confirmation d'une autre manière, car le but de cette question est de comprendre comment faire des appels à la portée externe et toujours pouvoir faire fonctionner d'autres directives contre la portée parente.

Sinon, je serais intéressé d'entendre des solutions qui utilisent une portée isolée si d'autres directives fonctionnent toujours contre la portée parente , mais je ne pense pas que cela soit possible.

Puisque la directive n'appelle qu'une fonction (et n'essaye pas de définir une valeur sur une propriété), vous pouvez utiliser $ eval au lieu de $ parse (avec une portée non isolée):

scope.$apply(function() {
    scope.$eval(attrs.confirmAction);
});

Ou mieux, utilisez simplement $ apply , ce qui permettra à $ eval () de comparer son argument à la portée:

scope.$apply(attrs.confirmAction);

Violon

Vous souhaitez utiliser le service $ parse dans AngularJS.

Donc pour votre exemple:

.directive('confirm', function ($parse) {
    return {
        restrict: 'A',

        // Child scope, not isolated
        scope : true,
        link: function (scope, element, attrs) {
            element.bind('click', function (e) {
                if (confirm(attrs.confirm)) {
                    scope.$apply(function(){

                        // $parse returns a getter function to be 
                        // executed against an object
                        var fn = $parse(attrs.confirmAction);

                        // In our case, we want to execute the statement in 
                        // confirmAction i.e. 'doIt()' against the scope 
                        // which this directive is bound to, because the 
                        // scope is a child scope, not an isolated scope. 
                        // The prototypical inheritance of scopes will mean 
                        // that it will eventually find a 'doIt' function 
                        // bound against a parent's scope.
                        fn(scope, {$event : e});
                    });
                }
            });
        }
    };
});

Il y a un problème avec la définition d'une propriété à l'aide de $ parse, mais je vous laisserai traverser ce pont lorsque vous y arriverez.

Appelez explicitement hideButtonla portée parent.

Voici le violon: http://jsfiddle.net/pXej2/5/

Et voici le HTML mis à jour:

<div ng-app="myModule" ng-controller="myController">
    <input ng-model="showIt"></input>
    <button ng-hide="$parent.hideButton()" confirm="Are you sure?" confirm-action="doIt()">Do It</button>
</div>

Le seul problème que j'ai est, comment appeler une méthode sur la portée parent si je ne la transmets pas sur une portée isolée?

Voici un jsfiddle où je n'utilise PAS de portée isolée et le ng-hide fonctionne bien, mais, bien sûr, l'appel à confirmAction () ne fonctionne pas et je ne sais pas comment le faire fonctionner.

Tout d'abord, un petit point: dans ce cas, le champ d'application du contrôleur externe n'est pas le champ d'application parent du champ d'application de la directive; le champ d'application du contrôleur externe est le champ d'application de la directive. En d'autres termes, les noms de variables utilisés dans la directive seront recherchés directement dans la portée du contrôleur.

Ensuite, l'écriture attrs.confirmAction()ne fonctionne pas car attrs.confirmActionpour ce bouton,

<button ... confirm-action="doIt()">Do It</button>

est la chaîne "doIt()", et vous ne pouvez pas appeler une chaîne, par exemple "doIt()"().

Votre question est vraiment:

Comment appeler une fonction lorsque j'ai son nom sous forme de chaîne?

En JavaScript, vous appelez principalement des fonctions en utilisant la notation par points, comme ceci:

some_obj.greet()

Mais vous pouvez également utiliser la notation de tableau:

some_obj['greet']

Notez que la valeur d'index est une chaîne . Donc, dans votre directive, vous pouvez simplement faire ceci:

  link: function (scope, element, attrs) {

    element.bind('click', function (e) {

      if (confirm(attrs.confirm)) {
        var func_str = attrs.confirmAction;
        var func_name = func_str.substring(0, func_str.indexOf('(')); // Or func_str.match(/[^(]+/)[0];
        func_name = func_name.trim();

        console.log(func_name); // => doIt
        scope[func_name]();
      }
    });
  }