5

次のシナリオで混乱しています。行のあるテーブルがあるとしましょう。ユーザーがテーブルのボタンをクリックすると、ユーザーフォームが jQuery でスライドダウンし、選択された行の値でフォームが表示されます。これが私が現在行っていることであり、あまり意味がありません。

意見

<tr ng-click="setItemToEdit(item)" slide-down-form>

...

<form>
   <input type="test" ng-model={{itemToEdit.Property1}} >
   <button ng-click=saveEditedItem(item)" slide-up-form>
<form>

コントロール

$scope.itemToEdit = {};

$scope.setItemToEdit = function(item) {
    $scope.itemToEdit = item;
});

$scope.saveEditedItem = function(item) {
   myService.add(item);
   $scope.itemToEdit = {};
}

ディレクティブ - スライドアップ / スライドダウン

var linker = function(scope, element, attrs) {
    $(form).slideUp(); //or slide down           
}

my ディレクティブと制御ロジックが切り離されすぎているようです。たとえば、保存エラーが発生した場合はどうなりますか? slideUp イベントが完了しているため、フォームは既に非表示になっています。その場合、slideUp操作を防ぎたいと思うでしょう。

私は AngularJS を約 1 週間しか使用していないので、不足しているものがあると確信しています。

4

1 に答える 1

6

確かに、これはよくある問題です... これを解決する 1 つの方法を次に示します。基本的には、ディレクティブで $watch を含むブール値を使用して、フォームのトグルをトリガーします。それ以外では、フォームの変数を編集したいオブジェクトに設定するだけです。

いくつかの疑似コードの一般的な考え方は次のとおりです。

//create a directive to toggle an element with a slide effect.
app.directive('showSlide', function() {
   return {
     //restrict it's use to attribute only.
     restrict: 'A',

     //set up the directive.
     link: function(scope, elem, attr) {

        //get the field to watch from the directive attribute.
        var watchField = attr.showSlide;

        //set up the watch to toggle the element.
        scope.$watch(attr.showSlide, function(v) {
           if(v && !elem.is(':visible')) {
              elem.slideDown();
           }else {
              elem.slideUp();
           }
        });
     }
   }
});

app.controller('MainCtrl', function($scope) {
   $scope.showForm = false;
   $scope.itemToEdit = null;

   $scope.editItem = function(item) {
       $scope.itemToEdit = item;
       $scope.showForm = true;
   };
});

マークアップ

<form show-slide="showForm" name="myForm" ng-submit="saveItem()">
    <input type="text" ng-model="itemToEdit.name" />
    <input type="submit"/>
</form>
<ul>
   <li ng-repeat="item in items">
         {{item.name}}
        <a ng-click="editItem(item)">edit</a>
   </li>
</ul>
于 2013-01-18T21:22:43.167 に答える