Calling methods conditionally inside Angularjs directives

Question

I'm a beginner to Angularjs, what I'm trying to do is call two different methods from a directive depending on the condition.

My work flow is

I have a form in a directive
When i try to add a new record via the form, function in the directive should call the save() method
when I try to update a new record, function in the directive should call the update method

This is my current code

#new html form (calling the form directive)
<recipe-form recipeForm="recipeFormData" > </recipe-form>

#edit html form (calling the form directive)
<recipe-form recipeForm="recipeFormData" > </recipe-form>

So in my directive I have the following method

#form directive
<form id="signup-form_id" ng-submit="$parent.Update()">

So what I want to do is, when the directive calls from the #new I want the method to be

<form id="signup-form_id" ng-submit="$parent.Create()">

So what I want to do is, when the directive calls from the #edit I want the method to be

<form id="signup-form_id" ng-submit="$parent.Update()">

I was trying to pass the method as a param, but for some reason it didn't work:

   #update form 
   <recipe-form recipeForm="recipeFormData" update="Update()"> </recipe-form>

Shomz · Accepted Answer · 2014-09-19 13:23:00Z

1

You didn't tell how you distinguish between the two actions, but you can always specify the method in a boolean variable (that you specify as a directive attribute, or a controller's scope variable, etc... let's call it updateMethod) and use it like this:

<form id="signup-form_id" ng-submit="updateMethod ? $parent.Update() : $parent.Create()">

Or even two separate forms (especially useful if the forms themselves are different):

<form id="signup-form_id" ng-submit="$parent.Update()" ng-if="updateMethod">

and:

<form id="signup-form_id" ng-submit="$parent.Create()" ng-if="!updateMethod">

The third option would be using a single submit function, but putting an if/else branching inside it.

answered Sep 19, 2014 at 13:23

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sameera207 Over a year ago

thanks for the answer, I went with the first option .. :) sorry for the late acceptance of the answer

meriadec · Accepted Answer · 2014-09-19 13:38:02Z

You actually pass the update method result by writing the () brackets, not its reference.

I advice you to pass your update / create function in your directive attributes. This way is more parametrable, and doesn't refer to $parent wich is not well isolated.

HTML:

<recipe-form custom-data="recipeFormData" method="create"></recipe-form>
<recipe-form custom-data="recipeFormData" method="update"></recipe-form>

Controller :

$scope.recipeFormData = { foo: 'bar' };

$scope.create = function (data) {
  // create something
}

$scope.update = function (data) {
  // update something
}

Directive :

app.directive('recipeForm', function () {
  return {
    templateUrl: 'mySuperDirective.html',

    // creates an isolated scope
    scope: {
      customData: '=',
      method: '='
    }
  };
});

mySuperDirective.html :

<form ng-submit="method()">
  <input type="text" ng-model="customData.foo">
  <button type="submit">OK</button>
</form>

Collectives™ on Stack Overflow

Calling methods conditionally inside Angularjs directives

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related