I am using following code,
=======================================
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--;
};
}
);
===============================
SERVICE CLASS
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 From 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"}]}
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();
With $resource only i am getting my template update, but with $resource and $q promise template is Empty
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?
Issue I am facing is, Marked objects are not getting value and representing null as shown in image below.
thanks.
