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