2014-02-16 3 views
1

Я использую следующий код,Угловая JS обещание в обслуживании не обновляя вид

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

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 КЛАСС

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 Из файла/данных/события /: 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();

С $ ресурсная только я получаю мое обновление шаблона, но с $ ресурсов и $ д обещание шаблона Пустой

Мой вопрос здесь, как управлять сферы в контроллере и обслуживания, и если нам нужно управлять областью на обоих уровнях, то какая польза от Сервиса? Может ли кто-нибудь помочь мне объяснить, как это можно достичь с использованием лучшей практики или кода качества?

Проблема, с которой я сталкиваюсь, отмеченные объекты не получают значения и представляют нуль, как показано на рисунке ниже.

спасибо.

+0

Какие ошибки у вас возникают? – Shomz

+0

моя страница не выполняет какое-либо выражение внутри Curly Braces – Aqdas

+0

Я вызываю ** json ** объекты из файла и при успехе в ** console log **, я могу видеть объекты, но все объекты не привязаны к их * * двойные фигурные скобки ** выражения – Aqdas

ответ

3

Он должен работать при изменении:

$scope.event = eventData.getEvent(); 

к:

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

Vola! спасибо за быстрое и исправление проблемы. Еще раз спасибо – Aqdas

+0

Нет проблем! Извините, я не мог сразу понять, что случилось. – Shomz

1

В 1,2, угловые шаблоны больше не UnWrap обещаний по умолчанию. Временное решение для установки:

$parseProvider.unwrapPromises(true); 

Будьте осторожны при использовании этого решения, как документация, кажется, намекают, что будущие версии могут не включать эту опцию.

Migrating from 1.0 to 1.2 - Templates no longer automatically unwrap promises

+0

В угловых 1.3 обещаниях не может быть автоматически развернуто вообще: https://github.com/angular/angular.js/commit/fa6e411da26824a5bae55f37ce7dbb859653276d – Pylinux

Смежные вопросы