似乎无法在 AngularJS 中重置 $scope 变量

Question

当 url 参数更改时，我试图在控制器中重置 $scope 变量，但我在保持旧值时遇到了一些问题。

我正在为一家律师事务所建立一个网站，如果我从简历页面本身以外的任何页面点击律师的简历，它就可以正常工作。但是，如果我在已经位于简历页面上时尝试点击新律师的简历页面，它似乎不会重置我的 $scope.thisAttorney 变量，而是创建它的第二个实例。

问题在于我有一个框，里面有关于当前律师的轮换引号，并设置了超时功能。所以，当这个问题发生时，它有两组引号在那个盒子里旋转。当我点击第二位律师的简历时，我需要它来忘记第一位律师。

以下是我认为相关的文件。请问您是否需要查看其他内容。

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;
    };


});


}]);

想法？

作为记录，我尝试将 quoteflip 放在主 script.js 中，但超时调用找不到它，所以我不得不将它带回 Controller。如果有人对此有解决方案，即：看到我的问题，请随时对此发表评论。谢谢。

Answer 1

我建议使用 Angular 的 $timeout 服务文档，可以找到 here

您只需将其作为附加的控制器依赖项传入：

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

所以

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

变成

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

如果您可以提供相关代码，这也会有所帮助。

Answer 2

您是否尝试过使用$timeout 而不是window.setTimeout？您可能需要它，因为您的 $scope 没有被应用到这个非角度异步服务上。

Answer 3

使用 $timeout。它具有自动 $apply 内置功能，因此您的值将在屏幕上被消化和更新。