2014-09-20 15 views
1

因此,這裏是我希望請求明智,初始頁面加載 - >獲取任務 - >添加任務的流程。添加任務,不應該要求後續獲取其創建的任務或列表。如何使用Restangular將我的任務添加回我的列表中

這裏是我app.js的相關部分迄今

.config(function (RestangularProvider) { 
RestangularProvider.setBaseUrl('http://localhost:8080'); 
RestangularProvider.addResponseInterceptor(function halInterceptor(data, operation, what) { 
    var resp; 

    if (operation === 'getList') { 
    if (typeof data._embedded !== 'undefined') { 
     resp = data._embedded[what]; 
     resp.page = data.page; 
     return resp; 
    } 
    else { 
     return []; 
    } 
    } 

    return data; 
}); 
}) 

這裏是我的控制器

'use strict'; 
angular.module('myTaskApp') 
.controller('Task', function ($scope, Restangular) { 
var tasks = Restangular.all('task'); 

if (typeof $scope.tasks === 'undefined') { 
    $scope.tasks = tasks.getList().$object; 
} 

$scope.add = function add() { 
    tasks.post($scope.task).then(function() { 
    console.log('add task: ', $scope.task); 
    // MAGIC HERE 
    }); 
}; 
}) 
; 

下面是響應頭爲創建

HTTP/1.1 201 Created 
Server: Apache-Coyote/1.1 
Access-Control-Allow-Origin: * 
Access-Control-Allow-: POST, GET, PUT, OPTIONS, DELETE 
Access-Control-Allow-Headers: content-type, x-requested-with 
Access-Control-Max-Age: 3600 
Location: http://localhost:8080/task/5c75235d-d9f7-4cdd-98b4-3487603d8fcb 
Content-Length: 0 
Date: Sat, 20 Sep 2014 06:34:59 GMT 

我認爲,我的問題的一部分是,反應不會返回身體,但是,我可以預測應該看起來像什麼,並且抓取位置後很容易製作。

{ 
"description" : "better", 
"_links" : { 
    "self" : { 
    "href" : "http://localhost:8080/task/5c75235d-d9f7-4cdd-98b4-3487603d8fcb" 
    } 
} 
} 

我怎樣才能讓這個當我創建一個新的資源,我可以把它添加到列表$scope.tasks並有反映在我ng-repeat。再次,這應該是沒有進一步調用API。

回答

0

更新了我的提供程序,它現在包含一個selfLink定義和一個post處理程序。我從響應中檢索位置並構造一個部分響應對象。

.config(function (RestangularProvider) { 
RestangularProvider.setBaseUrl('http://localhost:8080'); 
RestangularProvider.setRestangularFields({ selfLink: '_links.self.href' }); 
RestangularProvider.addResponseInterceptor(function halInterceptor(data, operation, what, url, res) { 
    console.log(data, operation, what, url, res); 

    if (operation === 'getList') { 
    if (typeof data._embedded !== 'undefined') { 
     var resp = data._embedded[ what ]; 
     resp.page = data.page; 
     return resp; 
    } 
    else { 
     return []; 
    } 
    } 

    if (operation === 'post' && res.status == 201) { 
    return { 
     _links: { 
     self: { href: res.headers('Location') } 
     } 
    }; 
    } 

    return data; 
}); 

然後在我的控制器都是我所要做的就是使用angular.extend的響應結合在一起,創造了「智能對象」

angular.module('lifeManagerApp') 
.controller('Task', function ($scope, Restangular) { 
var tasks = Restangular.all('task'); 

if (typeof $scope.tasks === 'undefined') { 
    $scope.tasks = tasks.getList().$object; 
} 

$scope.add = function add() { 
    tasks.post($scope.task).then(function (task) { 
    var obj = angular.extend($scope.task, task); 
    console.log('add task: ', obj); 
    $scope.tasks.push(obj); 
    }); 
}; 
}); 

值得一提的是,我的東西,我也不得不update CORS和確保my controller wasn't loading multiple times

相關問題