3

I tried to change a $scope variable in ng-click function. But does not seem to be able to do that.

Below is my code on my appController:

//  appController.js

$scope email = "[email protected]";

$scope.emailInfo = "[email protected]";

//emailOnClick() is a ng-click on DOM. It will be triggered when the user click a button, which is to save his email information

$scope.emailOnClick = function() {

  $scope.email = $scope.emailInfo;

  console.log($scope.email); //this will print "[email protected]".

};

console.log($scope.email); // this will print "[email protected]", but I 

//want it to print "[email protected]" as I triggered the ng-click function to 

//apply the change.


console.log($scope.emailInfo); //this will print "[email protected]".

What do I miss? Any thought?

Improve this question
6
  • it's not exactly clear what you are trying to do here. Where exactly in your code is this "global variable" assigned, and why are you trying to do this in the first place? global variables are never a good thing. Commented Oct 2, 2015 at 22:27
  • 1
    Your defining a click event, not running it. Commented Oct 2, 2015 at 22:28
  • Try debugging by starting off $scope.emailInfo in your controller with a default value that is not '', something like [email protected] and place that binding somewhere on the page. Once you click, see if it changes it. Commented Oct 3, 2015 at 1:50
  • ok now you changed the context of the question entirely. Before, you weren't using $scope, and you received answers stating that you should, so changing your question to inject $scope will make this question and associated answers very confusing to others in the future. aside from that, the first line of code, $scope email isn't even right (perhaps the absence of the . is a typo in the edit). Commented Oct 4, 2015 at 0:05
  • 1
    also, this isn't really a complete example. You don't show where these console.log messages are triggered, you don't show which controller these $scope variables are declared in, and you don't show the HTML that triggers this function. If those console.log messages are truly just in the base of the controller function, then it makes sense that they output the value that is set at the beginning, since they will output LONG before the function gets invoked. Commented Oct 4, 2015 at 0:09

2 Answers 2

Reset to default
1

Updated:

$scope.emailOnClick function will assign the $scope.emailInfo value to the $scope.email variable.

If you click in the «Send to server» button you'll see the new value that has been sent in the console.

(function() {
  var app = angular.module("myApp", []);
  app.controller("Controller", ["$scope",
    function($scope) {
      $scope.email = "[email protected]";
      $scope.emailInfo = "[email protected]";
      $scope.emailOnClick = function() {
        $scope.email = $scope.emailInfo; // Gets emailInfo value and assigns to $scope.email.
        console.log($scope.email);
      }
      $scope.sendToServer = function() {
        console.log($scope.email);
      };
      console.log($scope.email); // Initial state of $scope.email printed by default.
      console.log($scope.emailInfo); // Initial state of $scope.emailInfo printed by default.
    }
  ]);
})();
.email {
  background-image: linear-gradient(#FFF, #CCC);
  border: solid 1px #000;
  padding: 10px;
}
.emailInfo {
  background-image: linear-gradient(#FFF, #FBEE95);
  border: solid 1px #000;
  padding: 10px;
}
.option-clicked {
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="myApp">
  <div data-ng-controller="Controller">
    <div class="email">email: <span class="option-clicked">[email protected]</span>

    </div>
    <div class="emailInfo">emailInfo: <span class="option-clicked">{{email}}</span>

    </div>
    <button data-ng-click="emailOnClick()">Get email</button>
    <button data-ng-click="sendToServer()">Send to the server</button>
    <br />Result:
    <input id="txtEmail" data-ng-model="email" type="text" />
  </div>
</div>

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

5 Comments

I've made a simple demo jsfiddle.net/dannyjhonston/8y4h6zx0 Can you check it out?
Yes, I define $scope.email = "[email protected]" outside the ng-click function emailOnclick . When ng-click function is triggered, value of $scope.email will change to "[email protected]" and printed on the console. However, if I put console.log($scope.email) outside of the ng-click, it turned back to its original value. I am wondering if there is a way to change the value of $scope.email in a ng-click function.
@Brother_MW I've updated my answer with more details about your requirement. Can you check it out? Check the console when you run the example.
Will those two console.logs on the last two lines print the same email address after those ng-clicks are triggered? I want them to print the same output as we have used ng-click function to make changes.@Danny Fardy Jhonston Bermúdez
No, because they are within the same context within the same scope where you initialize $scope.email and $scope.emailInfo variables. This result is correct within the execution time of the controller. However, in this demo, when you execute the emailOnClick function you'll see the new values that has been updated in the view. Finally, when you execute the sendToServer function you'll see the new value that has been sent. This behaviour is correct.
0

You are defining a click function. Try moving your console.log inside the:

$scope.emailOnClick = function() {
Improve this answer

1 Comment

But I want it to be able to get the value after ng-click so that I can pass "var email" to the server later on.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.