current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite

I'm new to AngularJS and am trying to hide a div when a button is clicked. What I'm doing works fine until I put the button in the div I'm trying to hide (the button is using a different controller). The button works as expected when taken out of the controller so I assume it's an issue with scope. Any help would be appreciated.

<form action="" name="signUpForm" class="heroForm" >
      <div ng-hide="signUpB">
            <span id="signUpFormA">
                  <input required type="email" /> 
                  <input required type="password"/>
                  <span ng-controller="checkEmailCtrl">
                        <input type="button" ng-click="signUpB=true">
                  </span>
            </span>
      </div>
      <div ng-show="signUpB">
            <span id="signUpFormB">
                  <input required type="text">
                  <input required type="text">
                  <input type="submit">
            <span>
      </div>
</form>
share|improve this question
up vote 0 down vote accepted

Yes, you are setting signUpB=true on the scope of checkEmailCtrl. You can do something like this:

<form action="" name="signUpForm" class="heroForm" ng-init="signUpB={value:false}">
      <div ng-hide="signUpB.value">
            <span id="signUpFormA">
                  <input required type="email" /> 
                  <input required type="password"/>
                  <span ng-controller="checkEmailCtrl">
                        <input type="button" ng-click="signUpB.value=true">
                  </span>
            </span>
      </div>
      <div ng-show="signUpB.value">
            <span id="signUpFormB">
                  <input required type="text">
                  <input required type="text">
                  <input type="submit">
            <span>
      </div>
</form>

By wrapping the signUpB in an object, the signUpB.value=true statement will look up the signUpB object in the outer scope, and set it's value property to true, no modification will be made on checkEmailCtrl's scope.

share|improve this answer
up vote 0 down vote

ng-controller creates its own scope. So, within ng-click="signUpB=true", you are modifying the signUpB in this new scope.

You can fix this by using a object to hold the state of signUpB. Basically, replace all signUpB occurrences with state.signUpB. And, define state object in your outer controller's scope.

$scope.state = {signUpB: false // defaults to false}

Even better approach would be to use controllerAs syntax. Let's say your outer controller is OuterController. You define it as

ng-controller="OuterController as outerCtrl"

and,

replace all occurrences of signUpB with outerCtrl.signUpB to ensure you are using/modifying outerCtrl's model.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.