Question

当url参数发生变化时，我试图在我的控制器中重置$ scope变量，但是我在保持旧值时遇到了一些麻烦。

我有一个我为律师事务所建立的网站，如果我从任何页面点击其中一位律师的BIOS，除了生物页面本身，它就可以正常工作。但是，如果我在生物页面上尝试点击新的律师的生物页面时，它似乎没有重置我的$ 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;
    };


});


}]);

思想？

为了记录，我试图在主脚本中添加quotefl。但超时调用无法找到它，所以我不得不把它带回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 build，因此您的值将被消化并在屏幕上更新。

似乎无法在AngularJS

3 个答案: