我正在使用以下代码,

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

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


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

控制器类

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


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

来自文件/ data / event /:id的JSON数据

  {"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可以保证模板为空

我的问题是,如何在控制器和服务中管理范围,如果我们需要在两个级别上管理范围,那么服务的好处是什么?谁能帮助我解释一下,如何使用最佳实践或质量准则来实现?

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

谢谢。

最佳答案

更改后它应该可以工作:

$scope.event = eventData.getEvent();


至:

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

08-25 13:10
查看更多