How to pass variables from angular controller to jquery

Question

I have two html divs, each having a bunch of input fields. I also have an angular controller that gets the data entered in the input fields and checks if they are valid (ie: email, passwords match, etc). What I'm trying to do is hide the first div and show the second one once the controller says that the text entered in the first div is valid. Here is what the html looks like:

  <div id = "stageOne">
  <!-- whole bunch of inputs here -->
 </div>

<a class = "btn" id = "stageOneDone" ng-click = "checkFields(true)">Continue</a>
  <!-- First stage ends here-->


  <div align = "center" id = "stageTwo" style = "display: none">
     <!-- whole bunch of inputs here -->
  </div>

  <script>

  $(function(){

      $('#stageOneDone').click(function(){

        //var completedIncorrectly = something

        if(!completedIncorrectly){
          $('#stageOne').hide();
          $('#stageTwo').show();
        }

      })


  });

  </script>

The function checkFields() expects the value true when it should check the values of the first div and false for the second div. What I can't figure out how to do is get the return value of the function and use it in jquery.

EDIT: If you're thinking why not just show/hide the divs using angular, I want to use jquery's animations.

you should create a directive to do this, so that you can pass data from your controller and manipulate the dom correctly, it is the best way to achieve this. — Gatsbill
– Gatsbill, Commented Aug 28, 2016 at 16:36

ninesalt · Accepted Answer · 2016-08-28 18:16:32Z

2

Fixed this problem by just writing all the jquery in the controller.

answered Aug 28, 2016 at 18:16

ninesalt

4,3926 gold badges45 silver badges86 bronze badges

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

Comments

Artem Gorlachev · Accepted Answer · 2016-08-28 16:37:38Z

1

You can set variable inside controller, like $scope.step = 'one';

<div ng-show="step='one'">first step</div>
<div ng-show="step='second'">second step</div>
...

You don't need jQuery to do this.

answered Aug 28, 2016 at 16:37

Artem Gorlachev

6175 silver badges9 bronze badges

11 Comments

ninesalt Over a year ago

Check my edit. I'm trying to use jquery's animations. All I need to know how to do is define a variable outside jquery that I can use inside it.

Artem Gorlachev Over a year ago

so just define global variable somewhere and set it and get it. Anyway you can use jquery animations inside checkFields(), but better to use css animations and ng-class

ninesalt Over a year ago

How can I define a global variable in angular and access it in jquery? That's basically my question! :)

Artem Gorlachev Over a year ago

var completedIncorrectly = true; before $(function(){ ... and its done

ninesalt Over a year ago

Why would it be = true? I'm trying to get the value from the angular controller..

|

Collectives™ on Stack Overflow

How to pass variables from angular controller to jquery

2 Answers 2

Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related