昨天刚知道,原来把一个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>