6

私のAngularアプリには、次のようなコントローラーがあります。

function TemplateListControl($scope, TemplateService){
    $scope.templates = TemplateService.get(); // Get objects from resource

    // Delete Method
    $scope.deleteTemplate = function(id){
        $scope.templates.$delete({id: id});
    }
}

templatesビュー内に、モデルにバインドされたテーブルがあります。次のように：

<table ng-model="templates">
    <thead>
        <tr>
            <th style="width:40%">Title</th>
            <th style="width:40%">controls</th>
        </tr>
    <thead>
    <tbody>
        <tr ng-repeat="template in templates">
            <td>
                <!-- Link to template details page -->
                <a href="#/template/[[template.id]]">
                    [[template.title]]
                </a>
            </td>
            <td>
                <!-- Link to template details page -->
                <a class="btn btn-primary btn-small"
                   href="#/template/[[template.id]]">Edit
                </a>
                <!-- Link to delete this template -->
                <a class="btn btn-primary btn-small"
                   ng-click="deleteTemplate(template.id)">Delete
                </a>
            </td>
        </tr>
    </tbody>
</table>

上記のテンプレートの削除リンクをクリックすると、deleteTemplateメソッドDELETEが呼び出され、RESTAPIが正常に呼び出されます。$scope.templates = TemplateService.get();ただし、ビューが更新されて再度開始されるまで、ビューは更新されません。私は何が間違っているのですか？

4

3 に答える 3

3

コールバックの代わりにpromiseを使用する方が好きです。Promiseは、非同期プロセスを処理するための新しい方法です。サーバーから戻った直後に、apromiseを使用して結果を検査できます。

//Controller
myApp.controller('MyController',
    function MyController($scope, $log, myDataService) {

 $scope.entities = myDataService.getAll();
 $scope.removeEntity = function (entity) {       
        var promise = myDataService.deleteEntity(entity.id);
        promise.then(
            // success
            function (response) {
                $log.info(response);
                if (response.status == true) {
                    $scope.entities.pop(entity);
                }
            },
            // fail
            function (response) {
                $log.info(response);
                // other logic goes here
            }
        );
    };
 });

 //DataService
 myApp.factory('myDataService', function ($log, $q, $resource) {

return {
    getAll: function () {
        var deferred = $q.defer();
        $resource('/api/EntityController').query(
            function (meetings) {
                deferred.resolve(meetings);
            },
            function (response) {
                deferred.reject(response);
            });

        return deferred.promise;
    },

    deleteEntity: function (entityId) {
        var deferred = $q.defer();
        $resource('/api/EntityController').delete({ id: entityId},
            function (response) {
                deferred.resolve(response);
            },
            function (response) {
                deferred.reject(response);
            });

        return deferred.promise;
    }
   };
});

//Web API Controller
public class MeetingController : BaseApiController
{
   // .... code omited 

   public OperationStatus Delete(int entityId)
    {
        return _repository.Delete(_repository.Single<MyEntity>(e => e.EntityID == entityId));
    }
}

注：$ log、$ q、$resourceは組み込みのサービスです。それが役に立てば幸い ：）

于 2013-11-11T15:26:12.710 に答える
1

また、クライアント側を更新する必要があるため、以下のようにソースコードを変更します

 ng-click="deleteTemplate($index)">


$scope.delete = function ( idx ) {
  var templateid = $scope.templates[idx];

  API.Deletetemplate({ id: templateid.id }, function (success) {
    $scope.templates.splice(idx, 1);
  });
};
于 2013-03-15T11:10:36.700 に答える
0

コールバック関数を$resource。$deleteに渡すことができます

function TemplateListControl($scope, TemplateService){
  $scope.templates = TemplateService.get(); // Get objects from resource

  // Delete Method
  $scope.deleteTemplate = function(id){
    TemplateService.$delete({id: id}, function(data) {
      $scope.templates = data;
    });
  }
}

注意 RESTAPIの削除関数が配列を返す場合は、AngularJS $resourceエラーを回避するためにAngular$ resourceでisArray：trueを設定する必要があります-TypeError ：オブジェクト＃にはメソッド'push'がありません

$resource(URL, {}, {
  delete: {method:'DELETE', isArray: true}
});
于 2013-08-11T12:37:41.550 に答える