Question

我正在写一个angularjs应用程序。要求是在用户登录后显示用户的数据。因此，当用户成功登录时，他/她将被路由到下一个视图。到目前为止，我的申请工作正常。现在，当下一个视图加载时，我需要显示用户的现有记录。但是此时我看到一个空白页面，我可以在控制台中清楚地看到数据正在返回，但它没有绑定。我已经使用了$ scope。$ watch，$ scope。$ apply，甚至尝试在UI元素上调用scope，但它们都导致digest已经在进行中。我该怎么办？如果我刷新，页面会加载

 (function () {
"use strict";

angular.module("app-newslist")
    .controller("newsController", newsController);

function newsController($http,$q,newsService,$scope,$timeout)
{

    var vm = this;
    $scope.$watch(vm);
    vm.news = [];
    vm.GetTopNews = function () {
        console.log("Inside GetTopNews");
        newsService.GetNewsList().
        then(function (response)
        {
            angular.copy(response.data, vm.news);
        }, function () {
            alert("COULD NOT RETRIEVE NEWS LIST");
        });
    };
    var el = angular.element($('#HidNews'));
    //el.$scope().$apply();
    //el.scope().$apply();
    var scpe = el.scope();
    scpe.$apply(vm.GetTopNews());
    //scpe.$apply();
}

}）（）;

感谢您阅读

Answer 1

你没有在你的模板中展示你如何绑定它。我试图重新创建给你一个好主意。

我认为问题在于您从newsService处理承诺的方式。试着看$q Promises。 vm.news正在由角度以外的函数更新。使用$ scope。$ apply强制刷新。

original fiddle is here和a working example here

＆＃13;

(function() {
  "use strict";

  var app = angular.module("app-newslist", [])
    .controller("newsController", newsController)
    .service("newsService", newsService);

  newsController.$inject = ['$http', 'newsService', '$scope']
  newsService.$inject = ['$timeout']

  angular.bootstrap(document, [app.name]);

  function newsController($http, newsService, $scope) {

    var vm = this;
    vm.news = $scope.news = [];
    vm.service = newsService;

    console.warn(newsService)

    vm.message = "Angular is Working!";

    vm.GetTopNews = function() {
      console.log("Inside GetTopNews");

      newsService.GetNewsList().
      then(function(response) {
        $scope.$apply(function() {
          $scope.news.length > 0 ? $scope.news.length = 0 : null;
          response.data.forEach(function(n) {
            $scope.news.push(n)
          });

          console.log("VM", vm);
        })

      }, function() {
        alert("COULD NOT RETRIEVE NEWS LIST");
      });
    };

  }

  function newsService($timeout) {
    return {
      GetNewsList: function() {
        return new Promise(function(res, rej) {
          $timeout(function() {
            console.log("Waited 2 seconds: Returning");
            res({
              data: ["This should do the trick!"]
            });
          }, 2000);
        })
      }
    }
  }

})();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>


<body>


  <div class="main">
    <div class="body" ng-controller="newsController as vm">
      Testing: {{ vm.message }}
      <br>{{ vm.news }}
      <br>{{ vm }}
      <br>
      <button class="getTopNewsBtn" ng-click="vm.GetTopNews()">Get News</button>
      <br>
      <ul class="getTopNews">
        <li class="news-item" ng-repeat="news in vm.news track by $index">
          {{ news | json }}
        </li>
      </ul>
    </div>
  </div>

</body>

＆＃13;

AngularJs需要在API调用后刷新页面

1 个答案: