同步數據從在指令和關於服務器

服務：

angular.module('app') 
    .factory('UserFactory', function ($http) { 
    function profile() { 
     return $http.get('/gimme') 
     .then(function success (response) { 
      return response; 
     }); 
    };  
    var user = { 
     profile: profile 
    }; 


    return user;

它是在一個控制器中使用，如下所示：

控制器

angular.module('app') 
    .controller('HeaderCtrl', function ($scope, UserFactory) { 
    $scope.awesomeThings = [ 
     'HTML5 Boilerplate', 
     'AngularJS', 
     'Karma' 
    ]; 
    $scope.user = UserFactory.profile().then(function (response) { 
     $scope.user = response.data; 
    }); 

    $scope.change = function() { 
     $scope.user.name = 'New Name' 
    } 
}

如果我在使用HeaderCtrl的指令中調用change()方法，確保臨時更改user.name的更改實際上在我的服務器上更改它的最佳方法是什麼？換句話說，我將如何觸發put請求（我假設需要在Factory上調用某個函數，但我不確定是否確保調用該函數或將函數調用放在控制器中的最佳方式）。

感謝

來源

2015-02-06 Startec

在您的服務中爲'$ http.put（）'添加函數，並用'user'調用它。和btw鬆散assigment'$ scope.user = UserFactotory.profile（）...'並且在promise已經解決之後就離開它。 – 2015-02-06 09:01:53

有幫助嗎，不是嗎？ – 2015-02-08 20:31:41

這裏的延長你提供，使用免費JSONPlaceholder API代碼的例子。我認爲例子本身就足夠了答案？

HTML

<body ng-controller="Ctrl as vm"> 
    <div>data: {{ vm.todo | json }}</div> 
    <div>response: {{ vm.response | json }} </div> 
    <hr> 
    <button type="button" ng-click="vm.change('my new title')">Change title</button> 
</body>

的JavaScript

app.controller('Ctrl', function(TodoService) { 
    var vm = this; 
    var id = 1; 

    TodoService.getPost(id).then(function(response) { // Get 
    vm.todo = response.data; 
    }); 

    vm.change = function(val) { 
    vm.todo.title = val; 

    TodoService.putPost(vm.todo).then(function(response) { // Put 
     vm.response = response.status + ' ' + response.statusText; 
    }).catch(function(error) { 
     vm.response = angular.toJson(error); 
    }); 
    }; 
}); 

app.factory('TodoService', function($http) { 
    var endpoint = 'http://jsonplaceholder.typicode.com/todos/'; 
    var todoService = {}; 

    todoService.getPost = function(id) { 
    return $http.get(endpoint + id).then(function(response) { 
     return response; 
    }); 
    }; 

    todoService.putPost = function(todo) { 
    return $http.put(endpoint + todo.id, todo).then(function(response) { 
     return response; 
    }); 
    }; 

    return todoService; 
});

imgur

這裏

相關plunker http://plnkr.co/edit/VBvVen

來源

2015-02-06 10:19:13

同步數據從在指令和關於服務器

回答

相關問題