scope function does not work in angularjs

Question

I am trying to call a function defined in the controller, but due to some silly mistake it does not call, here is my code. It should alert 1 defined in the getCustomerID function. The scope variables are set properly like this.title

HTML

 <ons-template id="home.html">
      <ons-page ng-controller="Home as page">
        <ons-toolbar>
          <div class="left">
            <ons-toolbar-button onclick="fn.open()">
              <ons-icon icon="md-menu"></ons-icon>
            </ons-toolbar-button>
          </div>
          <div class="center">
            {{page.title}}
          </div>
        </ons-toolbar>
        <p style="text-align: center;  padding-top: 20px;">
        Choose Client : 
        <select ng-model="filterCondition.operator" ng-change="getCustomerID()">
            <option  ng-repeat="x in customers" value="{{x.id}}">{{x.name}}</option>
        </select>
        <ons-button ng-click="page.getCustomerID()">Call</ons-button>
        </p>            

        <div id="map"></div>

        <br/>
        <ons-button modifier="large" onclick="mylocation()">My Location</ons-button>
      </ons-page>
    </ons-template>

JS

    app.controller('Home', function($scope){
    $scope.page = {
        title : "CRGroup",
        name : localStorage.getItem("name"),
        email : localStorage.getItem("email"),
        profilepic : localStorage.getItem("profilepic"),
    }  

    $scope.filterCondition={
        operator: '1'
    }

    $.ajax({
        type: 'GET',
        url: 'http://XXXXX.php',        
        async: false,
        data: {},
        success: function (response) {                      
            $scope.customers = response;            
        },
        error: function (response) {
            $scope.error = true;
            $scope.$apply();
        }
    });

    $scope.page.getCustomerID = function() {
        alert(1);
    }   
});

You've mixed controller as and $scope syntax. You need to choose one or the other. — Lex
– Lex, Commented May 10, 2017 at 15:32
@Lex +1 Also try to avoid using $.ajax. Use $http instead. If you need configuration for $http use .config phase — Drag13
– Drag13, Commented May 10, 2017 at 15:33
@Vitalii Good point. Also, if the OP sticks with controller as syntax a local variable for this will need to be created because this. inside the promise resolution will not refer to the controller. — Lex
– Lex, Commented May 10, 2017 at 15:34
@Lex Please check the updated code, the getCustomerID function still does not call :( — Rajesh Vishnani
– Rajesh Vishnani, Commented May 10, 2017 at 16:14

Lex · Accepted Answer · 2017-05-10 16:41:58Z

2

You are still mixing controller as and $scope. If you are going to use controller as I would recommend removing all the $scope stuff from your controller. Here is how you might restructure your stuff to use controller as syntax. I don't know where your onclick functions are nor why you are using onclick instead of ng-click so I left those as is.

HTML

<ons-template id="home.html">
    <ons-page ng-controller="Home as page">
        <ons-toolbar>
            <div class="left">
                <ons-toolbar-button onclick="fn.open()">
                    <ons-icon icon="md-menu"></ons-icon>
                </ons-toolbar-button>
            </div>
            <div class="center">
                {{page.title}}
            </div>
        </ons-toolbar>
        <p style="text-align: center;  padding-top: 20px;">
            Choose Client : 
            <select ng-model="page.filterCondition.operator" ng-change="page.getCustomerID()">
                <option ng-repeat="x in page.customers" value="{{x.id}}">{{x.name}}</option>
            </select>
            <ons-button ng-click="page.getCustomerID()">Call</ons-button>
        </p>            
        <div id="map"></div>
        <br/>
        <ons-button modifier="large" onclick="mylocation()">My Location</ons-button>
    </ons-page>
</ons-template>

Controller:

app.controller('Home', function($http) {
    var _this = this;
    _this.title = "xxxx";
    _this.name = localStorage.getItem("name");
    _this.email = localStorage.getItem("email");
    _this.profilepic = localStorage.getItem("profilepic"); 
    _this.filterCondition = {
        operator: '1'
    };
    $http.get('http://xxxx.php')
        .then(function(response) {
            _this.customers = response.Data; 
           // I use Typescript and put my web service calls in a service 
           // so I can never remember if you need to use response.Data here,
           // but I think you do
        })
        .catch(function(error) {
            _this.error = true;
        });
    _this.getCustomerID = function() {
        alert(1);
    }   
});

answered May 10, 2017 at 16:41

Lex

7,2732 gold badges31 silver badges49 bronze badges

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

5 Comments

Rajesh Vishnani Over a year ago

I literally copied your code and changed the URL, the _this.title = "xxxx";' works, but _this.customers = response.Data; ` and _this.getCustomerID does not work, this is really strange

Lex Over a year ago

Try adding _this.customers = [] somewhere under var _this = this;, but before the $http.get call. It may be that not having that initialized is keeping the view from detecting an update. As for why the call to page.getCustomerID() is not working I can't think of any reason why it wouldn't be. Double check that you have spelled them the same in the controller and markup.

Rajesh Vishnani Over a year ago

Well, i initialized the customers array as well as double checked the spelling of the getCustomerID function, really strange! does angular js version matters?

Lex Over a year ago

Controller as was added in version 1.1.5 I believe so I would be surprised if it were a version issue. Perhaps update your question with the exact code you are using now and we can spot some subtle issue? Or create a JSFiddle demonstrating the issue.

Rajesh Vishnani Over a year ago

thanks for the help, the issue is fixed, the problem was the sequence of the js files declaration.

Tyrone Wilson · Accepted Answer · 2017-05-10 15:36:49Z

0

When you use the controller syntax as you must define your functions with this not with $scope

If you change the $scope.getCustomerID = function... to read this.getCustomerID = function...

same will go for your other functions.

Also note that you are going to have issues with the x in customers part as well as you need to do x in page.customers and in your controller you will need to do this.customers But if you define it in a sub function it also won't work unless you ensure that you hoist the context.

edited May 10, 2017 at 15:36

answered May 10, 2017 at 15:34

Tyrone Wilson

4,7482 gold badges33 silver badges36 bronze badges

10 Comments

Lex Over a year ago

Simply changing all $scope. to this. will cause unexpected behavior in the return from the promise.

Tyrone Wilson Over a year ago

@Lex, yes I edited the answer to mention hoisting the context as well. Personally I don't like the as syntax much. But it is the recommended way.

Lex Over a year ago

If you use Typescript it saves you from quite a bit of this pain since the transpilation to js already creates a local variable for this. If you're doing any Angular dev I strongly recommend using Typescript.

Rajesh Vishnani Over a year ago

@TyroneWilson i did change everything in JS from $scope to this as i understand your point that I am mixing it, and I also changed x in customers to x in page.customers, now even customer list stopped loading in the select, should i post the updated code?

Tyrone Wilson Over a year ago

@RajeshVishnani, perhaps it would be easier to just use the $scope. So change Home as page to be just Home. leave your controller as is and then change where you have page.getCustomerID to just getCustomerID and it should work.

|

csk · Accepted Answer · 2017-05-10 15:42:14Z

0

Check the changes:

app.controller('Home', function($scope){
$scope.page = {
  title : "xxxx",
  name : localStorage.getItem("name");
  email : localStorage.getItem("email");
  profilepic : localStorage.getItem("profilepic"); 

  }  

$scope.filterCondition={
    operator: '1'
}

$.ajax({
    type: 'GET',
    url: 'http://xxxx.php',     
    async: false,
    data: {},
    success: function (response) {                      
        $scope.customers = response;            
    },
    error: function (response) {
        $scope.error = true;
        $scope.$apply();
    }
});

$scope.page.getCustomerID = function() {
    alert(1);
}   
});

And Try using $http service provided by angular instead of using ajax calls. That way, I think you can also eliminate the $scope.$apply(). FYI, using $scope.$apply is not a good practice. And try to stay in angular rather than using jquery or vanilla js methods.

answered May 10, 2017 at 15:42

csk

1791 silver badge7 bronze badges

2 Comments

Rajesh Vishnani Over a year ago

can you please post HTML change as well, because I have changed your JS accordingly, but getCustomerID still does not work.

Rajesh Vishnani Over a year ago

please check the updated code, the getCustomerID function still does not call :(

Collectives™ on Stack Overflow

scope function does not work in angularjs

3 Answers 3

5 Comments

10 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

10 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related