pass variable inside same controller from ng-click angular JS

Question

I want to get the variable value which has been assigned inside ng-click function

mainApp.controller('setSearchController',function($scope) {

  $scope.getQuery = function(userq)  //ng-click function
  {
    $scope.userq=userq;
  };

  alert($scope.userq);  // showing Undefined even after the click is made
// Once clicked I want to use **userq** value to make one $https call
//  apart from services,How to use userq here outside getQuery scope
});

before using ng-click , its ok to get undefined value but what I am trying to do is to use the same controller for another view , which will be rendered after the ng-click happens

.when('/search', {
   templateUrl: "../static/views/seachResult.html",
 controller: "setSearchController"
})

so I want to fetch some searched data in searchResult.html view after $https call

as value is assigned in scope you can use it anywhere in `setSearchController` controller — Anik Islam Abhi, Nov 01 '15 at 09:05
@charlietfl: Because I want to make an https call using that value and display the response — Shashank Vivek, Nov 01 '15 at 09:13
The alert is hit as soon as the page loads so it's undefined because nobody sets it. As soon as someone clicks the getQuery you will have it defined. — michelem, Nov 01 '15 at 09:14
@Shashank that doesn't make any sense. Please show all relevant code and explain your problem in more detail — charlietfl, Nov 01 '15 at 09:16
If you use the same controller for another view, this other view will have a new $scope instance, and a new controller instance. Controllers are not singletons like services. Each view has its own instance. If you need to share data between controllers, then use a service. — JB Nizet, Nov 01 '15 at 10:48
@JBNizet: If u add `$scope.var="someVal"` outside getQuery function inside the same controller. You can see it as `{{ var }}` on **seachResult.html** . — Shashank Vivek, Nov 01 '15 at 11:20
@JBNizet: http://stackoverflow.com/questions/33459234/pass-value-in-between-angular-js-controller-and-services — Shashank Vivek, Nov 01 '15 at 11:42
I don't see a function that an `ng-click` could call here, and I don't see the HTML showing any `ng-click` or what it *might be trying* to call. — Claies, Nov 01 '15 at 13:50
also, your response to @charlietfl doesn't really make any sense, using a variable in an https call has nothing to do with the fact that one of your code statements isn't in the correct place. — Claies, Nov 01 '15 at 13:53

score 0 · Answer 1 · answered Nov 01 '15 at 13:41

HTML:

<div ng-app="myApp" ng-controller="myCtrl">
  <button ng-click="getQuery('myVal')">Test</button>
  <button ng-click="consoleIt(myVal)">Console</button>
</div>

Controller:

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function($scope) {
    $scope.getQuery = function(a){
        $scope[a] = a;
    }
    $scope.consoleIt = function(a){
        console.log(a);
    }
  }]);

The getQuery function creates a new property on your scope. The property's name is equal to what is passed (string) as agrument to the function. consoleIt simply console logs its agrument. myVal is undefined until you click the test button. You can also pass a variable (instead of string) to getQuery, in this case just remove the quotes from inside of parenthesis.

score 0 · Accepted Answer · edited May 23 '17 at 11:44

0

Take a look at my answer here: Pass value in-between angular JS controller and services

It is the same question, I have solved your problem with event listeners using $on and $emit

edited May 23 '17 at 11:44

Community

1
1

answered Nov 02 '15 at 15:41

Ignacio Villaverde

1,264
1
11
15

score -1 · Answer 3 · answered Nov 01 '15 at 09:48

Move alert inside statement function getQuery.

mainApp.controller('setSearchController', function($scope) {
      $scope.userq = null; 
      $scope.getQuery = function(userq)  //ng-click function
      {
          $scope.userq=userq;
          alert($scope.userq);
      };
    });

or this solution

mainApp.controller('setSearchController', ['$scope', '$window', setSearchController]);

    function setSearchController ($scope, $window) {
          $scope.userq = null; 
          $scope.getQuery = function(userq)  //ng-click function
          {
              $scope.userq=userq;
              $window.alert($scope.userq);
          };
        }

pass variable inside same controller from ng-click angular JS

3 Answers3

Linked