Question

我有一个使用Angular 1.4.3的项目。在其中一个页面上，我从网格中选择一个值，然后在另一个页面上显示该记录的详细信息。在详细信息页面的“页面加载”期间，我将使用服务并从数据库中获取值。我能够看到结果从数据库和服务返回，然后填充适当的变量，但UI没有使用适当的值更新。做了一些研究，提到了使用$ scope。$ apply（）和$ timeout（）函数，但我没有取得任何成功。

在Angular中加载页面期间是否有任何事情要尝试进行UI刷新？

Answer 1

假设你有两个控制器：

        var app = angular.module('plunker', []);

        app.controller('MainCtrl', function($scope) {
          $scope.name = 'World';
          $scope.another = 'AnotherWorld';
        });

        app.controller('AnotherCtrl', function($scope) {
        });

和模板：

        <div  ng-controller="MainCtrl">
              <p>{{name}}</p>
              <div ng-controller="AnotherCtrl">
            <p>{{name}}</p>
            <p>{{another}}</p>
              </div>
            </div>

name和另一个从parent继承到子范围，你应该在模板上看到更新。

现在介绍一项服务：

        app.service('OnlyAService', function($q, $timeout){
             return {
               getNewValue: getNewValue
             }

             function getNewValue() {
             var deferred = $q.defer();
             $timeout(function(){
               deferred.resolve({name: 'NewCrapReplacedWorld', another: 'NewCrapReplacedAnotherWorld'});
             }, 2000);

             return deferred.promise;
           }
        });

将服务注入AnotherCtrl，更新另一个并命名

        app.controller('AnotherCtrl', function($scope, OnlyAService) {
          OnlyAService.getNewValue().then(function(data){
             $scope.another = data.another;
             $scope.name = data.name;

          });
        });

您会看到模板中AnotherCtrl中的另一个名称和名称发生更改，但不会更改父项的名称。它永远不会改变。一种解决方案是使用$ scope。$ parent.name = data.name。

所谓的范围汤可能是你问题的原因，也许。还有其他方法可以修复它。没有代码，这是一个非常广泛的推测领域。

用户界面没有更新AngularJS中的“页面加载”

1 个答案: