Can't seem to reset $scope variable in AngularJS

Question

I'm trying to reset a $scope variable in my controller when a url parameter changes, but I'm having some trouble with it holding on to old values.

I have a site I'm building for a law firm and if I click to one of the attorney's bios from any page except the bio page itself, it works fine. But, if I try to click to a new attorney's bio page when I'm already on the bio page, it doesn't seem to reset my $scope.thisAttorney variable but rather creates a second instance of it.

The problem with this is that I have a box with rotating quotes about the current attorney that's set up with a timeout function. So, when this problem hits, it has two sets of quotes rotating in that box. I need it to forget about the first attorney when I click on the second attorney's bio.

Here are what I think are relevant files. Please just ask if you need to see something else.

app.js

var app = angular.module("LKSU", ['ngRoute']);

app.config(function($routeProvider) { 
$routeProvider
    // route for the home page
    .when('/', {
        templateUrl: 'content.php',
        controller: 'HomeController'
    })

    .when('/bios/:user_id?', {   
        controller: 'AttorneyController', 
        templateUrl: 'bio.php'
    })

    .otherwise({
        redirectTo: '/'
    });

});

AttorneyController.js

app.controller('AttorneyController', ['$scope', '$location', 'attorneys', '$sce', '$routeParams', function($scope, $location, attorneys, $sce, $routeParams) {

$scope.myFunctions = {};

var practiceareas = {
    altdispute: "Alternative Dispute Resolution",
    businesscorp: "Businesses & Corporations",
    estateplanning: "Estate Planning",
    futures: "Futures & Derivatives",
    litigation: "Litigation",
    productliability: "Product Liability",
    realestate: "Real Estate",
    securities: "Securities"
};

function quoteflip(quotelist, id, total){
    clearTimeout(timeoutQuotes);    

alert($scope.thisAttorney.name + " 1");  // This is how I know it's holding onto the first attorney in $scope.thisAttorney

    var idno = (id + 1) % total;
    $("#bio_quotes").html(quotelist[id]);
    var src1 = quotelist[idno];

    $("#bio_quotes").fadeOut(500, function(){
        $("#bio_quotes").html(src1).fadeIn(500);
    });

    timeoutQuotes =  window.setTimeout(function(){quoteflip(quotelist, idno, quotelist.length);}, 5000);
    }

var timeoutQuotes = "";

attorneys.success(function(data){
    if($routeParams.user_id > 0){
        var matches = $.grep(data.attorneys, function(obj) { return obj.id == $routeParams.user_id; });

        if (matches.length === 1) {
            $scope.thisAttorney = "";
            $scope.thisAttorney = matches[0];
            $scope.$apply();
            var src = $scope.thisAttorney.quotes[0];
            $("#bio_quotes").html(src).fadeIn(500);

            clearTimeout(timeoutQuotes);

            $scope.attorneys = data.attorneys;
            $scope.practiceareas = practiceareas;
            timeoutQuotes =  window.setTimeout(function(){quoteflip($scope.thisAttorney.quotes, 0, $scope.thisAttorney.quotes.length);}, 5000);
    }

    }else{
        $scope.myFunctions.bio_id = 0;
    };


});


}]);

Thoughts?

For the record, I tried to put quoteflip in the main script.js but timeout call couldn't find it so I had to bring it back into the Controller. If anyone has a fix for that, i.e.: sees my problem, please feel free to comment on that as well. Thanks.

JDTLH9 · Accepted Answer · 2015-05-18 20:05:21Z

1

I would suggest using Angular's $timeout service documentation can be found here

You just need to pass this in as an additional controller dependency:

app.controller('AttorneyController', ['$scope', '$location', 'attorneys', '$sce', '$routeParams', function($scope, $timeout, $location, attorneys, $sce, $routeParams) { .... }

So

window.setTimeout(function(){quoteflip(quotelist, idno, quotelist.length);}, 5000);

Becomes

$timeout(function(){quoteflip(quotelist, idno, quotelist.length);}, 5000)

If you could provide a plunk with the relevant code this would be helpful also.

edited May 18, 2015 at 20:05

answered May 18, 2015 at 18:08

JDTLH9

1,7751 gold badge23 silver badges34 bronze badges

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

9 Comments

Reverend Bubbles Over a year ago

Using $timeout didn't change anything, nor did changing my apply line to $scope.$apply("thisAttorney"); I'd do a Plunk, but those always get messed up every time I try. Apparently, I'm not too good at them. Sorry. :(

JDTLH9 Over a year ago

Could you try setting the $scope.thisAttorney property when you "click on the second attorney's bio" using ng-click maybe. Can you use Chrome developer tools to debug the javascript? If not you could add another alert inside the bit of the code where $scope.thisAttorney gets set to see if this code is getting run.

Reverend Bubbles Over a year ago

I'll try the click thing and see if that works. I know it's getting in there via alerts, like you suggested. The problem is, in the quoteflip function, when I alert it, it shows one name, then also alerts the other name. It's like I have two timeouts going, with different quotes and a different $scope.thisAttorney. I've tried to cancel the timeout, as you can see, but it doesn't seem to help.

Reverend Bubbles Over a year ago

I went to try it and realized I'm not sure how to do that since $scope.thisAttorney is actually an object from within the larger object of all attorneys brought in from a JSON file. Setting it is a few step process. :(

JDTLH9 Over a year ago

Ah okay. I would try the "sources" tab in Chrome developer tools and debug through the controller and the code that creates the $scope.this Attorney JavaScript object. Just make sure that everything is firing as and when you expect it to. You may need to re-structure the methods so that they all fire once in the order you wish.

|

noobavistic · Accepted Answer · 2015-05-18 18:06:49Z

0

Have you tried using $timeout rather than window.setTimeout? You probably need it because your $scope isn't being applied-on this non-angular async service.

answered May 18, 2015 at 18:06

noobavistic

434 bronze badges

Comments

Cesar · Accepted Answer · 2015-05-18 19:26:57Z

0

Use $timeout. That has an automatic $apply build in so your values will be digested and updated on screen.

answered May 18, 2015 at 19:26

Cesar

3331 silver badge15 bronze badges

1 Comment

Reverend Bubbles Over a year ago

The onscreen values updated. The problem is that, somehow, the old one is still lurking, along with its recursive timeout call, in the background,wreaking havoc.

Collectives™ on Stack Overflow

Can't seem to reset $scope variable in AngularJS

3 Answers 3

9 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related