Appelez la méthode basée sur le contrôleur anglarjs à partir de la directive personnalisée

Question

J'utilise jquery étapes dans mon application angularjs. J'ai utilisé une directive personnalisée pour initier le plugin jquery. Maintenant, je dois valider toutes les entrées une fois que le bouton d'arrivée est cliqué sur les dernières étapes du formulaire. Pour ce faire, je sais qu'il y a une option qui doit être définie appelée Finished. Maintenant, comment puis-je appeler ma méthode de contrôleur dans cette section?

app.directive('step', [function() { 
    return { 
     restrict: 'EA', 
     scope: { 
     stepChanging: '=' 
     }, 
     compile: function(element, attr) { 
      element.steps({ 
      labels: {finish: "SUBMIT"}, 
      headerTag: "h3", 
      bodyTag: "section", 
      transitionEffect: "slideLeft", 
      stepsOrientation: "vertical", 
      onFinished: function (event, currentIndex) { 
      console.log("submit button has been clicked"); 

      $scope.validator(); //problem here 

      } 
     }); 
     return { 
      //pre-link 
      pre:function() {}, 
      //post-link 
      post: function(scope, element) { 
      //element.on('stepChanging', scope.stepChanging); 
      } 
     } 
     } 
    }; 
    }]) 

Answer 1

vous directive est isolé portée, il ne peut pas accéder à la portée du contrôleur, si tu veux passer des fonctions que vous pouvez utiliser & dans l'objet de la portée de votre directive comme ci-dessous

scope:{ 

validator:'&' 

} 

et dans votre directive passer ce fonctionnent comme ci-dessous

<step validator='validator'/> 

Answer 2

pour passer des événements à partir d'une directive de portée isolât de contrôleur de parent, utiliser l'expression & bind ing.

Pendant la phase de compilation de la directive, il n'y a pas de place pour une utilisation de la fonction.
Déplacer la fonction à la postLink:

app.directive('step', function() { 
    return { 
     restrict: 'EA', 
     scope: { 
     //stepChanging: '=', 
     stepChanging: '<', 
     //USE expression binding 
     validator: '&' 
     }, 
     //compile: function(element, attr) { 
     link: function postLink(scope,element,attrs) { 
      element.steps({ 
       labels: {finish: "SUBMIT"}, 
       headerTag: "h3", 
       bodyTag: "section", 
       transitionEffect: "slideLeft", 
       stepsOrientation: "vertical", 
       onFinished: function (event, currentIndex) { 
       console.log("submit button has been clicked"); 

       //$scope.validator(); //problem here 
       scope.validator(); 
       } 
     ); 
     } 
     /* 
     return { 
      //pre-link 
      pre:function() {}, 
      //post-link 
      post: function(scope, element) { 
      //element.on('stepChanging', scope.stepChanging); 
      } 
     }*/ 
     } 
    }; 
}); 

Utilisation:

<step step-changing="vm.changing" validator="validator()"> 
</step> 

aller de l'avant, évitez d'utiliser les deux sens = obligatoire. Au lieu de cela, utilisez la liaison < unidirectionnelle. Il est plus efficace et fournit un meilleur chemin pour migrer vers Angular 2+.

Également éviter les instructions de fermeture d'élément avec /> il provoque des problèmes avec certains navigateurs. Au lieu de cela, utilisez une étiquette de fermeture </step>.