AngularJs 抓狂之: $q promise 自动unwarp功能被禁用了

昨天刚知道,原来把一个Promise绑定到Scope,View会自动显示该Promise的值(auto-unwarp),但是晚上回家试的时候发现,无论如何都不行。又浪费了两个多小时找原因,最后才发现,这个auto-unwrap的功能在AngularJs 1.2.0的某个RC之后就被禁用了。官方用词Deprecated,没有替代怎么叫deprecated呢?明明就是removed!

这是StackOverflow的提问:http://stackoverflow.com/questions/21193400/why-promise-in-factory-not-working-since-angularjs-1-2-0

这是Plnkr: http://plnkr.co/edit/w2O8Ci?p=preview


所以,下面代码里面的Promise已经不会自动绑定了,要让他工作正常,需要:

  NameFactory.getName().then(function(data){
    $scope.name = data
  });

代码:

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <!--<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>-->
  <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
  <script>
    var app = angular.module('myApp', []);
    app.factory('NameFactory', function($http, $q) {
      return {
        getName: function() {
          var deferred = $q.defer();
          deferred.resolve({
            name: "World"
          });
          return deferred.promise;
        }
      }
    });

    app.controller("NameCtrl", function($scope, NameFactory) {
      $scope.name = NameFactory.getName();
    });
  </script>
</head>

<body ng-controller="NameCtrl">
  <h1>Hello, {{name.name}}</h1>
</body>

</html>


所以正确的做法是:

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
  <script>
    var app = angular.module('myApp', []);
    app.factory('NameFactory', function($http, $q) {
      return {
        getName: function() {
          var deferred = $q.defer();
          deferred.resolve({
            name: "World"
          });
          return deferred.promise;
        }
      }
    });

    app.controller("NameCtrl", function($scope, NameFactory) {
      NameFactory.getName().then(function(data){
        $scope.name = data;
      });
    });
  </script>
</head>

<body ng-controller="NameCtrl">
  <h1>Hello, {{name.name}}</h1>
</body>

</html>


原文地址:https://www.cnblogs.com/puncha/p/3876855.html