Question

我有一个嵌套到另一个

的控制器

<div id="divTest" ng-controller="TestCtrl">
    {{test}}
    <div ng-controller="InnerTestCtrl">
        {{innerTest}}
    </div>
</div>

当我尝试在3秒后将范围值更改为内部控制器时，它失败了。您能解释一下why和how reach这种行为吗（我的意思是价值会发生变化，例如从1到2）？

var app = angular.module("TestApp", []);
app.controller("TestCtrl", function($scope)
               {
                   $scope.test = "a";
               });
app.controller("InnerTestCtrl", function($scope)
               {
                   $scope.innerTest = "1";
                   window.setTimeout(function() 
                                     {
                                         $scope.innerTest = "2";
                                     }, 3000);
               });
angular.bootstrap(document.getElementById("divTest"), ["TestApp"]);

jsfiddle

中的示例

Answer 1

不使用window.setTimeout()，而是使用$timeout服务，因为当您设置$scope.innerTest的值时，它位于函数window.setTimeout()中，关于哪个角度不知道一点都不当您更改该函数内部模型的值时，模型将不会更新，直到您调用$ scope。$ apply（）函数使角度知道某些值已在角度范围之外更改。所以，有两个修复。第一个是：

$scope.innerTest = "2";
 $scope.$apply($scope.innerTest);

第二个是最好的方法，实际上是角度方法：

app.controller("InnerTestCtrl", function($scope, $timeout)
               {
                   $scope.innerTest = "1";
                   $timeout(function() 
                                     {
                                         $scope.innerTest = "2";
                                     }, 3000);
               });

不要忘记注入$timeout服务。希望这会使你的概念清楚明白：）

Answer 2

看起来你应该$scope.$apply()或内心服务$timeout 我认为您需要使用$timeout服务。

var app = angular.module('TestApp', []);
app.controller('TestCtrl', ['$scope', function($scope) {
    $scope.test = 'a';
}]);
app.controller('InnerTestCtrl', ['$scope', '$timeout', function($scope, $timeout) {
    $scope.innerTest = '1';
    $timeout(function() {
        $scope.innerTest = '2';
    }, 3000);
}]);
angular.bootstrap(document.getElementById('divTest'), ['TestApp']);

或

var app = angular.module('TestApp', []);
app.controller('TestCtrl', ['$scope', function($scope) {
    $scope.test = 'a';
}]);
app.controller('InnerTestCtrl', ['$scope', function($scope) {
    $scope.innerTest = '1';

    setTimeout(function() {
        $scope.apply(function() {
            $scope.innerTest = '2';
        });
    }, 3000);
}]);
angular.bootstrap(document.getElementById('divTest'), ['TestApp']);

Answer 3

你应该在控制器中注入$ timeout，而不是使用window.timeout。

请改为尝试：

var app = angular.module("TestApp", []);
app.controller("TestCtrl", function($scope)
               {
                   $scope.test = "a";
               });
app.controller("InnerTestCtrl", function($scope, $timeout)
               {
                   $scope.innerTest = "1";
                   $timeout(function() 
                                     {
                                         $scope.innerTest = "2";
                                     }, 3000);
               });
angular.bootstrap(document.getElementById("divTest"), ["TestApp"]);

嵌套的AngularJS控制器误解

3 个答案: