角JS承诺服务不更新视图 [英] Angular JS promise in service not updating view
本文介绍了角JS承诺服务不更新视图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用以下code，
=======================================
=======================================
<!doctype html>
<html lang="en" ng-app="eventsApp">
<head>
<META charset="UTF-8">
<title>Event Registration</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/app.css">
</head>
<body ng-clock>
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li><a href="/app/NewEvent.html">Create Event</a></li>
</ul>
</div>
</div>
<div ng-controller="EventController" style="padding-left:20px; padding-right:20px">
<div id="me">
<img data-ng-src="{{event.imageUrl}}" alt="{{event.name}}"/>
<br />
<br />
<button type="button" class="btn btn-primary" ng-click="scrollToSession()">Scroll</button>
<div class="row">
<div class="span11">
<h2>{{event.name}}
</h2>
</div>
</div>
<div class="row">
<div class="span3">
<div><strong>Date:</strong> {{event.date}}</div>
<div><strong>Time:</strong> {{event.time}}</div>
</div>
<div class="span4">
<address>
<strong>Address:</strong><br/>
{{event.location.address}}<br/>
{{event.location.city}}, {{event.location.province}}
</address>
</div>
</div>
<hr/>
<h3>Sessions</h3>
Order By:
<select ng-model="sortorder" class="input-small">
<option selected value="name">Name</option>
<option value="-upVoteCount">Votes</option>
</select>
Show:
<select ng-model="query" class="input-medium">
<option selected value="">All</option>
<option value="introductory">Introductory</option>
<option value="intermediate">Intermediate</option>
<option value="advanced">Advanced</option>
</select>
<ul class="thumbnails">
<li ng-repeat="session in event.sessions | filter:query | orderBy:sortorder"
class="span11" id="session{{session.id}}">
<div class="row session">
<div class="span0 well votingWidget">
<div class="votingButton" ng-click="upVoteSession(session, event)">
<i class="icon-chevron-up icon-white"></i>
</div>
<div class="badge badge-inverse">
<div>{{session.upVoteCount}}</div>
</div>
<div class="votingButton" ng-click="downVoteSession(session, event)">
<i class="icon-chevron-down"></i>
</div>
</div>
<div class="well span9" ng-click="navigateToDetails(event)" style=" height:100%; overflow: hidden;">
<h4 class="well-title">{{session.name}} <button type="button" class="btn" ng-show="allowUserToEditSession(session)" ng-click="editSession(session)" style="margin-left:10px;">Edit</button></h4>
<h6 style="margin-top:-10px;">{{session.creatorName}}</h6>
<span>Duration: {{session.duration | durations}}</span><br />
<span>Level: {{session.level}}</span>
<p>{{session.abstract}}</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<script src="/lib/jquery-2.0.3.min.js"></script>
<script src="/lib/angular/angular.js"></script>
<script src="/lib/angular/angular-resource.js"></script>
<script src="/lib/angular/angular-resource.min.js"></script>
<script src="/lib/underscore.js"></script>
<script src="/js/app.js"></script>
<script src="/js/filters.js"></script>
<script src="/js/controllers/EventController.js"></script>
<script src="/js/services/EventData.js"></script>
<script src="/lib/bootstrap.min.js"></script>
</body>
</html>
=======================================
=======================================
eventsApp.controller('EventController',
function EventController ($scope, eventData) {
$scope.sortorder = 'name';
$scope.event = eventData.getEvent();
$scope.upVoteSession= function (session) {
session.upVoteCount++;
};
$scope.downVoteSession = function (session) {
session.upVoteCount--;
};
}
);
===============================
===============================
eventsApp.factory('eventData', function ($resource, $q) {
var resource = $resource('/data/event/:id', {id:'@id'});
return{
getEvent : function () {
var deferred = $q.defer();
resource.get({id:1},
function (event) {
deferred.resolve(event);
},
function (response) {
deferred.reject(response);
});
return deferred.promise;
},
save: function (argument) {
// body...
var deferred = $q.defer();
event.id=5;
resource.save(event,
function function_name (response) { deferred.resolve(response); },
function function_name (response) { deferred.reject(response); }
);
return deferred.promise;
}
};
});
=====================================
=====================================
{"id":1,"creator":"jmcooper","name":"Code Camp","date":"03/15/2013","time":"9:00am - 5:00pm","location":{"address":"123 Wall St","city":"New York","province":"NY"},"imageUrl":"http://blog.laptopmag.com/wpress/wp-content/uploads/2012/08/Code-Camp_sf.jpg","sessions":[{"id":1,"upVoteCount":0,"creator":"jmcooper","name":"How To Program","track":"DevOps","duration":1,"abstract":"this session will teach you to program","creatorName":"Jim Cooper","level":"advanced"},{"id":2,"upVoteCount":0,"creator":"jmcooper","name":"How To Dance","track":"Web","duration":4,"abstract":"this session will teach you to dance","creatorName":"Jim Cooper","level":"introductory"},{"id":3,"upVoteCount":0,"creator":"bob","name":"How To Sing","track":"DevOps","duration":1,"abstract":"this session will teach you to sing Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum Lorum Ipsum FooBarsum ","level":"advanced","creatorName":"Bob"},{"duration":2,"name":"How To Be Awesome","abstract":"this course will make me rich","creator":"bob","creatorName":"Bob","id":4,"upVoteCount":0,"track":"Web","level":"introductory"},{"duration":2,"track":"Web","name":"How to build Angular Applications","abstract":"This session is all about angular applications","creator":"bob","creatorName":"Bob","upVoteCount":0,"id":5,"level":"intermediate"}]}
我在这里面临的是问题，角的最新版本不允许，因为它是用previosuly落实承诺。在文档中，他们说，为了实现诺言，你必须需要申请的承诺范围。
$ scope.apply（）;
The issue I am facing here is, Angular's latest version do not allow to implement promise as it was used previosuly. in documentation, they says, to implement promise, you must need to apply promise to scope. $scope.apply();
是 $资源只有我得到我的模板更新，但与 $资源和$ Q承诺模板空缺
With $resource only i am getting my template update, but with $resource and $q promise template is Empty
在这里我的问题是，如何管理控制器和服务范围之内，如果我们需要在两个层面进行管理的范围，那么什么是服务的好处？谁能帮我解释一下，利用最佳实践和质量code这可怎么实现？
My Question here is, How to manage scope within controller and service, and if we need to manage scope at both level, then what is benefit of Service? Can anyone help me to explain, how this can be achieve using best practice or quality code?
问题，我面对的是，标记的对象都没有得到价值并重新presenting空，如下面的图像。
Issue I am facing is, Marked objects are not getting value and representing null as shown in image below.
感谢。
推荐答案
当你改变它应该工作：
$scope.event = eventData.getEvent();
到
eventData.getEvent().then(function(res){
$scope.event = res;
});
这篇关于角JS承诺服务不更新视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
