मैं अपने नियंत्रक से किसी तत्व पर एक स्लाइड एनीमेशन टॉगल करने के लिए निर्देश का उपयोग कैसे करूं?

Question

मैं निम्नलिखित परिदृश्य पर उलझन में हूं। मान लें कि मेरे पास पंक्तियों वाली एक टेबल है। जब कोई उपयोगकर्ता तालिका में किसी बटन पर क्लिक करता है तो मैं चाहता हूं कि उपयोगकर्ता 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   
} 

यह मेरा निर्देश लगता है और मेरे नियंत्रण तर्क भी डिस्कनेक्ट कर दिया गया। उदाहरण के लिए, यदि कोई त्रुटि त्रुटि है तो क्या होता है? फ़ॉर्म पहले ही छिपा हुआ है क्योंकि स्लाइडअप ईवेंट पूरा हो गया है। मैं शायद उस मामले में स्लाइडअप ऑपरेशन को रोकना चाहता हूं।

मैंने केवल एक सप्ताह तक एंगुलरजेएस का उपयोग किया है, इसलिए मुझे यकीन है कि कुछ ऐसा है जो मुझे याद आ रहा है।

Answer 1

निश्चित रूप से, यह एक आम समस्या है ... इसे हल करने का एक तरीका यहां है: मूल रूप से एक बूलियन का उपयोग अपने रूप में टॉगलिंग को ट्रिगर करने के निर्देश में $ घड़ी के साथ करें। इसके बाहर आप अपने फॉर्म पर उस ऑब्जेक्ट को केवल एक वैरिएबल सेट करेंगे जिसे आप संपादित करना चाहते हैं।

यहाँ कुछ छद्म-कोड में सामान्य विचार है:

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