Jak używać dyrektywy do przełączania animacji slajdów na elemencie z kontrolera?

Question

Jestem zdezorientowany w następującym scenariuszu. Powiedzmy, że mam tabelę z wierszami. Gdy użytkownik kliknie przycisk w tabeli, chcę, aby formularz użytkownika zsunął się z jQuery i wyświetli formularz z wybranymi wartościami wiersza. Oto co mam aktualnie robi, że nie za bardzo sensu:

Zobacz

<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> 

Kontrola

$scope.itemToEdit = {}; 

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

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

dyrektywy - Przesuń w górę/w dół ślizgawką

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

Wydaje dyrektywa mój i moja logika sterująca są zbyt odłączony. Na przykład, co się stanie, jeśli wystąpi błąd zapisu? Formularz jest już ukryty, ponieważ zdarzenie slideUp zostało zakończone. Najprawdopodobniej chciałbym zapobiec operacji slideUp w takim przypadku.

Używam AngularJS tylko przez około tydzień, więc jestem pewna, że ​​czegoś mi brakuje.

Answer 1

Oczywiście, jest to częsty problem ... Oto jeden sposób rozwiązania tego problemu: Zasadniczo użyj wartości boolowskiej z $ watch w dyrektywie, aby uruchomić przełączanie formularza. Poza tym wystarczy ustawić zmienną w formularzu na obiekcie, który chcesz edytować.

Oto ogólna idea w pewnym psuedo-kod:

//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; 
    }; 
}); 

markup

<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>