calling angularjs controller based method from custom directive

Question

I am using jquery steps in my angularjs app. I have used a custom directive to init the jquery plugin. Now I need to validate all input once the finish button is clicked on the final steps of the form. In order to do that I know there is a option which needs to be set called onFinished. Now how do I call my controller method in this 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);
          }
        }
      }
    };
  }])

Are you talking about the page controller, or the controller for this directive? — rrd, Jun 24 '17 at 15:14
@rrd page controller. the controller which has the form. i have a method there called validator — Nurul Alam, Jun 24 '17 at 15:15

score 0 · Answer 1 · answered Jun 24 '17 at 14:29

0

you directive is isolated scope , it cannot access controller scope , if u want to pass functions you can use & in scope object of your directive like below

scope:{

validator:'&'

}

and in your directive pass this function as below

<step validator='validator'/>

answered Jun 24 '17 at 14:29

Srinivas ML

732
3
12

DO you mean in my controller i can pass this function like ? – Nurul Alam Jun 24 '17 at 14:51
Yes , please check this question https://stackoverflow.com/questions/18378520/angularjs-pass-function-to-directive – Srinivas ML Jun 24 '17 at 15:43

score 0 · Answer 2 · answered Jun 24 '17 at 16:38

To pass events from a directive with isolate scope to parent controller, use expression & binding.

During the directive compile phase, there is no scope for a function use.
Move the function to the 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);
          }
        }*/
      }
    };
});

Usage:

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

Moving forward, avoid using two-way = binding. Instead use one-way < binding. It is more efficient and provides a better path for migrating to Angular 2+.

Also avoid closing element directives with /> it causes problems with some browsers. Instead use a closing tag </step>.

calling angularjs controller based method from custom directive

2 Answers2