angularjs在控制器中的承诺之后改变了根镜

时间:2016-12-30 10:21:27

标签: angularjs angularjs-service angularjs-http angularjs-rootscope

在我从服务中收到promise后,我正试图在控制器中更改一些 $ rootscope变量

$ rootscope变量用于设置html页面标题属性等。

下面是我的代码,我创建了一个名为changeRootPageNotFound()的函数来更改 $ rootscope变量。如果在promise.then函数中调用它,它就不起作用。

app.controller('mainController', ['$routeParams', '$scope', '$rootScope', 'mainService', function ($routeParams, $scope, $rootScope, mainService) {
    var mainCtrl = this;
    mainCtrl.id = $routeParams.itemId;

    var promise = mainService.getData($routeParams.id);

    promise.then(function (response)
    {
        if (response.data.data) {
            mainCtrl.data = response.data.data;
        } else {
            mainCtrl.data = false;
            changeRootPageNotFound();
        }
    });
    function changeRootPageNotFound() {
        $rootScope.title = "Page Not Found - 404";
        $rootScope.titleSuffix = "";
    }
    // changeRootPageNotFound();  // works here
}]);

如何在收到服务的延期承诺后更改$ rootscope变量?

2 个答案:

答案 0 :(得分:2)

添加.catch方法:

promise.then(function (response)
{
    //if (response.data.data) {
        mainCtrl.data = response.data.data;
    //} else {
    //    mainCtrl.data = false;
    //    changeRootPageNotFound();
    //}
}).catch(function(errorResponse) {
    console.log(errorResponse.status);
    mainCtrl.data = false;
    changeRootPageNotFound();
    throw errorResponse;
});

当状态超出范围200-299时,$http服务拒绝承诺。

  

throw errorResponse;是什么,可以省略吗?

如果省略throw errorResponse,则拒绝处理程序返回值undefined。这会将被拒绝的承诺转换到已解决为undefined的已履行承诺。如果没有进一步的链接,可以省略。

问题的一个常见原因是程序员没有意识到这一点并且无意中转换了承诺。

  

而不是.catch,您可以将相同的函数传递给第二个参数

.catch与使用.then方法的第二个参数之间的细微差别之一是,.then成功处理程序中的运行时错误不会被拒绝处理程序捕获第二个论点。

答案 1 :(得分:1)

根据您的代码段,您的代码应该有效。在我的掠夺者中,它也在延期承诺之后工作。

// Code goes here
angular.module('Test',[])
  .service('Service', function($q){
    this.ts = function(){
      var deferred = $q.defer();
      deferred.resolve("hello")
      return deferred.promise;
    }
  })
  .controller('Controller', function(Service, $rootScope){

    Service.ts().then(function(response){
      $rootScope.title="hello";
      changeRootPageNotFound();
    });

    function changeRootPageNotFound() {
        $rootScope.title = "Page Not Found - 404";
        $rootScope.titleSuffix = "";
    }
  });

这是html

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="Test">
    <div ng-controller="Controller">

      <h1>{{title}}</h1>

    </div>
  </body>

</html>

请检查此Plunker https://plnkr.co/edit/THXDYrWuTqR8UYSJlerB?p=preview