Question

在下面的代码中，我有一个名为$scope.name的变量。默认情况下，它的值为“Hello 1”。 5秒后，我设置了setTimeout功能，将$scope.name的值更新为“Hello 2”。

该变量显示调试模式的变化。但新值不会更新为 {{name}} 。换句话说，它只是在页面上显示旧值“Hello 1”，而不是“Hello 2”，这是必需的。

提前感谢您的帮助。

var quizApp = angular.module("quizApp",[]);
quizApp.controller("quizCtrl",function($scope){

    $scope.name = "Hello 1";

    function pAHL(){
        $scope.name ="hello 2";
    }
    setTimeout(pAHL, 5000)
})

Answer 1

您不需要使用$timeout。

function pAHL(){
    $scope.name ="hello 2";
    $scope.$apply();
}

修改避免摘要错误的更优雅的解决方案是使用$ timeout：

function pAHL(){ $timeout(function () { $scope.name ="hello 2"; }); }

应该做的伎俩。 Fiddle

Answer 2

将setTimeout(pAHL, 5000)更改为$timeout(pAHL, 5000)并将$timeout注入quizCtrl

var quizApp = angular.module("quizApp",[]);
quizApp.controller("quizCtrl",function($scope, $timeout){
    $scope.name = "Hello 1";

    function pAHL(){
        $scope.name ="hello 2";
    }
    $timeout(pAHL, 5000)
})

或第二个选项是使用$scope.$apply()

setTimeout(function() {
    $scope.$apply(pAHL);
}, 5000)

angularjs变量值不更新

2 个答案: