0

RESTAPIと通信しているAngularJSアプリがあります。このアプリには、ユーザーがリソースを作成、読み取り、更新、削除できる管理部分があります。

いくつかの異なるリソースがあり、リソースごとに1つが部分的であり、各メンバーをある種の入力フィールドとして定義します。テンプレートに共通するものの双方向バインディングを作成するディレクティブを作成しました。

また、リソースごとにngResourceを作成しました。

今私の問題に。1つのリソースのコントローラーが機能していますが、ほとんどの場合、パーシャルから直接呼び出され（submit（）など）、ngResourceと通信する関数のみが含まれています。

コード自体は、いくつかの例外を除いて、他のすべてのコントローラーにコピーして、リソース名を変更するだけです。これは私が避けたいことです。

どうすれば抽象的なParentCtrlを作成し、そのときに必要なリソースを注入できますか？これはテスト可能ですか？これは問題の悪いアプローチですか？

通常はコントローラーではなくモデルを抽象化しようとしましたが、この場合はどうすればよいかわかりません。

編集：コードを追加

リソース：

angular.module('experienceServices', ['ngResource'])
  .factory('Experience', function($resource){
    return $resource('/api/experience/:id',
      {'id': '@_id'}, {edit: { method: 'PUT' }});
  });

コントローラ：

App.controller('ExperienceCtrl', function( $scope, Experience ) {
  $scope.resources = [];
  $scope.currentItem = {};

  $scope.updateResources = function(){
    $scope.resources = Experience.query();
  };

  $scope.findById = function(id){
    for (var i = 0; i < $scope.resources.length; i++){
      if ($scope.resources[i]._id === id){
        return $scope.resources[i];
      }
    }
  };

  $scope.showItem = function(id){
    $scope.currentItem = findById(id);
  };

  $scope.create = function (experience){
    Experience.save(angular.copy(experience), function(){
      $scope.updateResources();
    });
  };

  $scope.editItem = function (experience){
    var item = angular.copy(experience);
    if (!item.hasOwnProperty('_id')){
      alert('Can not modify non existing item');
    }
    Experience.edit(item, function(res){
      $scope.updateResources();
    });
  };

  $scope.edit = function(id){
    $scope.experience = $scope.findById(id);
  };

  $scope.del = function(id){
    Experience.remove({ id: id }, function(){
      $scope.updateResources();
    });
  };
  $scope.updateResources();
});

指令：

App.directive('resources', function (){
    return {
      scope: {
        list: '=',
        display: '@',
        edit: '&',
        del: '&'
      },
      template: '<div ng-repeat="elem in list">Name: {{ elem[display] }}' +
                ' <button ng-click="edit({ item: elem._id })">Edit</button> ' +
                ' <button ng-click="del({ item: elem._id })">Delete</button> ' +
                '</div>'
    };
  });
4

1 に答える 1

1

API 全体をサービスにラップし、コントローラーからアクセスするのはどうですか? リソースタイプを引数として関数に渡すことができます

于 2013-02-10T21:53:50.373 に答える