2014-02-16 53 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> 

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

控制器類

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

隨着$資源只有我得到我的模板更新,但$資源和$ Q承諾模板

我的問題在這裏,如何控制和服務中管理範圍,如果我們需要在兩個層面上管理範圍,那麼服務的好處是什麼?任何人都可以幫我解釋一下,如何使用最佳實踐或質量代碼實現這一目標?

我面對的問題是,標記的對象沒有獲得價值並且代表null,如下圖所示。

謝謝。默認情況下

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

你會得到什麼錯誤? – Shomz

+0

我的頁面沒有在大括號內實現任何表達式 – Aqdas

+0

我正在從文件調用** json **對象,並且在**控制檯日誌中成功**,我可以看到對象,但所有對象都不會被分配給它們的* *雙曲花括號**表情 – Aqdas

回答

3

它應該工作的時候你改變:

$scope.event = eventData.getEvent(); 

來。一個臨時的解決辦法是設置:

$parseProvider.unwrapPromises(true); 

在使用此解決方案要小心,因爲文件似乎暗示,未來版本可能不包含此選項。

請參閱:Migrating from 1.0 to 1.2 - Templates no longer automatically unwrap promises

+0

Vola!感謝您的快速和修復問題。再次感謝 – Aqdas

+0

沒問題!對不起,我馬上看不到有什麼問題。 – Shomz

1

到1.2,角模板不再展開承諾:

+0

在角1.3中承諾不能自動解包:https://github.com/angular/angular.js/commit/fa6e411da26824a5bae55f37ce7dbb859653276d – Pylinux