$scope doesn't outside callback function

Question

I have developed AngularJS application that integrates with PouchDB database. When trying to get info from the database, the $scope variable exists only inside the method.

db.allDocs({include_docs: true, descending: true}, function(err, doc) {
    $scope.$apply(function(){  
        $scope.info = doc.rows;
    });
});

$scope.select = function(id){

        for(var i = 0; i < $scope.info.length; i++){
            if(id == $scope.info[i].doc._id){
                $scope.$apply(function (){
                    $scope.sName = $scope.info[i].doc.name;
                    $scope.sSurname = $scope.info[i].doc.surname;
                    $scope.sPhone = $scope.info[i].doc.phone;
                    $scope.sAddress = $scope.info[i].doc.address;
                    console.log($scope.info[i].doc);
                });


            }
        }

    };

Here I call the Select function to select a user, and then I want to show that user in the inputs so I can update the info.

<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
    <h3>All users</h3>
    <div class="list-group">
        <a href="#" ng-repeat="i in info" class="list-group-item" ng-click="select(i.doc._id)">{{i.doc.name + ' ' + i.doc.surname}}</a>
    </div>
</div>

Here I use $scope variables

<div class="col-xs-6 col-sm-3 sidebar-offcanvas" style="margin-left: 20%;">
    <h3>Selected user</h3>
    <input type="text" ng-model="sName"  class="form-control" placeholder="Name" />
    <input type="text" ng-model="sSurname" class="form-control" placeholder="Surname" />
    <input type="text" ng-model="sPhone" class="form-control" placeholder="Phone" />
    <input type="text" ng-model="sAddress" class="form-control" placeholder="Address" />
    <br/>
    <table>
        <tr>
            <td><button ng-click="" class="btn btn-lg btn-primary">Update</button></td>
            <td><label style="visibility: hidden;">a;dl</label></td>
            <td><button ng-click="" class="btn btn-lg btn-danger">Remove</button></td>
        </tr>
    </table>
</div>

$scope.sName, $scope.sSurname... are undefined outside the select function..

Any help?

We need to see more code. What is the context of `$scope` and how is `$scope.select` invoked ? — gkalpak, Jul 02 '14 at 04:59
So, you tell me that you are calling `$scope.$apply()` inside an `ngClick` callback and you don't get any errors ? Difficult to believe :) — gkalpak, Jul 02 '14 at 07:09
And, please, next time someone asks _"Are you sure you are not getting any errors ?"_, don't answer _"nope, there are no errors..."_ if you are not absolutely sure :) — gkalpak, Jul 02 '14 at 07:37
There weren't any errors in the code. The error was in the HTML! — Aleksandar Mihajlovski, Jul 02 '14 at 08:34
That is really strange. It should give you an error about the $digest beng already in progress. If it doesn't, then something is wrong... — gkalpak, Jul 02 '14 at 08:39

score 0 · Answer 1 · answered Jul 01 '14 at 22:21

0

Your problem is that you have a function within a loop, so i is always equal to $scope.info.length + 1 by the time the function is executed.

If you use jshint, it will warn you of such errors so you don't discover them at runtime.

answered Jul 01 '14 at 22:21

nlawson

11,510
4
40
50

That's not the problem :/ if I delete the $scope.$apply function this method is setting the $scope.sName, $scope.sSurname... variables, but I cannot use them outside the method.. – Aleksandar Mihajlovski Jul 01 '14 at 22:26

score 0 · Answer 2 · answered Jul 02 '14 at 07:36

The only problem seems to be that you are using $scope.$apply() inside of a callback to ngClick (which also triggers an $digest cycle).

Remove $scope.$apply() and it should work fine:

$scope.select = function (id) {
    for (var i = 0; i < $scope.info.length; i++) {
        if (id === $scope.info[i].doc._id) {
            // $scope.$apply(function (){
                $scope.sName = $scope.info[i].doc.name;
                $scope.sSurname = $scope.info[i].doc.surname;
                $scope.sPhone = $scope.info[i].doc.phone;
                $scope.sAddress = $scope.info[i].doc.address;
                console.log($scope.info[i].doc);
            // });
        }
    }
};

See, also, this short demo.

Extra bonus 1:

When a link's href is #, most browsers will scroll to the top of the page (unless you manually prevent it). If you want your <a>'s to behave as buttons and still be styled as links, you should use href="".

Extra bonus 2:

You don't have to pass the id and then lopp over all is in info to find a matching doc.
You can pass the corresponding doc directly:

<a href="" ... ng-click="select(i.doc)" ng-repeat="i in info">...</a>

$scope.select = function (doc) {
    $scope.sName    = doc.name;
    $scope.sSurname = doc.surname;
    $scope.sPhone   = doc.phone;
    $scope.sAddress = doc.address;
};

@АлександарМихајловски: Always glad to help :) If this answer helped you solve your problem, please mark it as accepted and vote it up (accept: green tick-mark on the top-left of the answer | upvote: little "up"-arrow on the top left of the answer). That way, other users facing a similar problem will know this answer solves it ! — gkalpak, Jul 02 '14 at 08:36

$scope doesn't outside callback function

2 Answers2