Angular JS承诺在服务中不更新视图

时间：2014-02-16 05:10:37

标签： javascript angularjs

我正在使用以下代码，

=======================================

HTML 

<!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>

=======================================

CONTROLLER CLASS 

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;
    }
};
});

=====================================

JSON DATA来自File / data / event /：id'

  {"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"}]}

我在这里遇到的问题是，Angular的最新版本不允许实现承诺，因为它是先前使用的。他们说，在文档中，为了实现承诺，您必须将承诺应用于范围。     $ scope.apply（）;

$ resource 只有我的模板更新，但 $ resource和$ q promise 模板空

我的问题是，如何管理控制器和服务范围，如果我们需要在两个层面管理范围，那么服务的好处是什么？任何人都可以帮我解释一下，如何使用最佳实践或质量代码实现这一目标？

我面临的问题是，标记的对象没有获得值并且表示null，如下图所示。

感谢。

2 个答案:

答案 0 :(得分：3)

改变时应该有效：

$scope.event = eventData.getEvent();

到：

eventData.getEvent().then(function(res){
    $scope.event = res;
});

答案 1 :(得分：1)

从1.2开始，Angular模板默认不再解包promises。临时解决方案是设置：

$parseProvider.unwrapPromises(true);

使用此解决方案时要小心，因为文档似乎暗示未来版本可能不包含此选项。

请参阅：Migrating from 1.0 to 1.2 - Templates no longer automatically unwrap promises

相关问题
最新问题