AngularJS在一个控制器中读取、创建、编辑、删除函数

Question

我有这样一个控制器：

myCtrls.controller( 'profile' , [ '$scope' , '$http', '$timeout' , function( $scope , $http, $timeout ){

$scope.saveChangesMotivation = function ( motivation ) {

    $http.post( 'api/admin/motivation/updateMotivation/', {
        motivation : motivation
    } ).
    success( function( data ){
        $scope.msg = true;

        $timeout(function(){
            $scope.msg = false;
        }, 1500);
    }).error( function(){
        console.log( 'Bład komunikacji z API' );
    });

};

$scope.deleteMotivation = function ( motivation , $index ) {

    if( !confirm( 'Czy na pewno chcesz usunac ten motivation?' ) )
        return false;

    $scope.motivation.splice( $index , 1 );

    $http.post( 'api/admin/motivation/deleteMotivation/', {
        motivation : motivation
    }).error( function(){
        console.log( 'Bład komunikacji z API' );
    });

};

$scope.createMotivation = function ( motivation ) {

    $http.post( 'api/admin/motivation/createMotivation/', {
        motivation : motivation
    } ).

    success( function( data ){
        $scope.msgMot = true;

        $timeout(function(){
            $scope.msgMot = false;
            $scope.motivationForm = false;
            $scope.motivation = {};
        }, 1500);
    }).error( function(){
        console.log( 'Bład komunikacji z API' );
    });

};

$http.get( 'api/admin/motivation/getMotivation' ).
success( function( data ){
    $scope.motivation = data;
}).error( function(){
    console.log( 'Bład komunikacji z API' );
});

}]);

当我需要使用saveChangesMotivation()和deleteMotivation (一个特定对象)时，我会发现‘动机’返回所有对象。我在其他控制器中使用了这个函数，但是没有一起使用，它们工作得很好。我怎么解决这个问题？

编辑:视图

<div ng-click="motivationForm = true; boredForm = false; goalsForm = false" ng-show="!motivationForm">Add</div>
        <div ng-click="motivationForm = false" ng-show="motivationForm">Hide</div>
        <div ng-show="!showAllMot" ng-click="showAllMot = true">Show</div>
        <div ng-show="showAllMot" ng-click="showAllMot = false">Hide</div>
        <div ng-show="motivationForm">
            <br>
            <div class="row">
                <form ng-submit="createMotivation( motivation )">

                    <div class="col-xs-8"><input type="text" class="form-control inline" placeholder="Dodaj tekst motywacyjny" ng-model="motivation.text"></div>
                    <div class="col-xs-4">
                        <button type="submit" ng-show="!msgMot">Sobmit</button>
                        <button type="submit" class="btn btn-success pull-right inline" ng-show="msgMot" disabled>Saved</button>
                    </div>
                </form>
            </div>
        </div>
        <hr>
        <div ng-show="showAllMot">
            <div ng-repeat="m in motivation">
                <form ng-submit="saveChangesMotivation( motivation )">
                    <div class="row">
                        <div class="col-xs-9">
                            <div ng-show="!editMot">{{m.text}}</div>
                            <input type="text" ng-model="m.text" ng-show="editMot" />
                        </div>
                        <div class="col-xs-3 text-right">

                            <button ng-show="!editMot" ng-click="editMot = true">Edit</button>
                            <button type="submit" ng-show="editMot" ng-click="editMot = false">Save</button>
                            <button ng-click="deleteMotivation( motivation , $index )">Delete</button>
                        </div>
                    </div>  
                </form>
            </div>
            <hr>
        </div>

例如，当我使用createMotivation函数并在网络中的控制台中检查它时，该函数显示了错误，即我没有设置任何内容，可能是因为“动机”返回所有对象，而不是返回一个特定的对象。我知道返回这个函数中的所有对象使用了console.log( $scope.motivation )，并在控制台中看到了这一点。对不起我的英语。

Answer 1

在ng-重复过程中，将整个集合传递给每个函数：

<form ng-submit="saveChangesMotivation( motivation )">

对于每个函数调用，将“动机”更改为"m“，这是用于定义中继器的变量(ng-重复=”m in动机“)。

<form ng-submit="saveChangesMotivation( m )">

其他功能也是如此。然后，您将在每个函数中拥有特定的对象，而不是整个集合。

Answer 2

我认为这种方法是可行的，因为你必须使用不同的方法，这取决于你想做什么。如果要获取数据使用方法，请获取$http.get()，如果要提交数据，则使用POST $http.post()方法，等等。

• GET ($http.get)
• 头($http.head)
• 员额($http.post)
• 删除($http.delete)
• PUT ($http.put)
• JSONP ($http.jsonp)

希望能帮上忙。

Answer 3

虽然我不知道您的问题是什么，但我想指出，一般来说，在控制器中包含服务器请求是个坏主意。最好将它们放在服务或工厂中，并在需要时给它们打电话。这将使您的代码更加可重用和更容易测试。

app.factory('MyDataFactory', ['$http',
  function($http){
    motivationFactory = {};
     var create = function() {
        $http.post(); // Your post() code here
    }

    var read = function() {
        $http.get();  // Your get() code here
    }

    var update  = function() {
        $http.put();  // Your put() code here
    }

    var delete = function() {
        $http.delete();  // Your delete() code here
    }

    motivationFactory.create = create;
    motivationFactory.read= read;
    motivationFactory.update= update;
    motivationFactory.create = delete;

    return motivationFactory;
  }]);

$http服务异步运行将返回一个承诺。您现在可以像这样从控制器调用服务。

app.controller('MotivationController', function($scope, MyDataFactory) {
  MyDataFactory.read().then(function successCallback(response){
    // this callback will be called asynchronously when the response is available
    $scope.motivation = response;
  }, function errorCallback(response){
   // called asynchronously if an error occurs or server returns response with an error status.
    console.log(response);
});

请注意，上面的代码还没有实现，但是应该给出一个大纲。