將範圍傳遞給用於jquery動畫的工廠

Question

我想在表單提交上運行一些jQuery代碼。我希望它是可重用的，並且我已經有了一個工廠，用於在控制器之間交換數據。

HTML（jsfiddle）

<div ng-app="myApp"> 
    <div id="div_1" ng-controller="FirstCtrl"> 
     <form ng-submit="Data.submit('#div_1','#div_2')"> 
      <input type="text" ng-model="Data.FirstName"><br> 
      Input is : <strong>{{Data.FirstName}}</strong> 
      <input type="submit" value="Submit" /> 
     </form> 
    </div> 
    <div id="div_2" style="display:none;" ng-controller="SecondCtrl"> 
     Second controller to verify data is being shared: <br> 
     <strong>{{Data.FirstName}}</strong> 
    </div> 
</div> 

的Javascript

var myApp = angular.module('myApp', []); 
myApp.factory('Data', function(){ 
    var root = { 
     FirstName: '' 
    }; 
    root.submit = function(to_hide, to_show) { 
     $(to_hide).slideUp(function(){ 
      $(to_show).slideDown(); 
     }); 
    } 
    return root; 
}); 
myApp.controller('FirstCtrl', function($scope, Data){ 
    $scope.Data = Data; 
}); 
myApp.controller('SecondCtrl', function($scope, Data){ 
    $scope.Data = Data; 
}); 

這工作，但我覺得我盜號的。有沒有更好的方法來做到這一點？

更重要的是，什麼是角度方式這樣做？

順便說一句，我沒有使用ngAnimate，因爲純粹的CSS動畫。我仍然希望舊版瀏覽器能夠體驗這些動畫。

Answer 1

DOM操作調用可能應該封裝在指令中。將元素傳遞給指令，並將對象傳遞給指令。

指令：

myApp.directive('hideShow', function() { 
    return { 
     restrict: 'A', 
     scope: { 
      hideSelector: '=', 
      showSelector: '=', 
      data: '=hideShow' 
     }, 
     link: function(scope, element, attrs) { 
      element.submit(function (e) { 
       e.preventDefault(); 
       alert(scope.data.FirstName); 
       $(scope.hideSelector).slideUp(function(){ 
        $(scope.showSelector).slideDown(); 
       }); 
      }); 
     } 
    }; 
}); 

HTML

<div id="div_1" ng-controller="FirstCtrl"> 
    <form hide-show="Data" hide-selector="'#div_1'" show-selector="'#div_2'"> 
     <input type="text" ng-model="Data.FirstName"><br> 
     Input is : <strong>{{Data.FirstName}}</strong> 
     <input type="submit" value="Submit" /> 
    </form> 
</div> 

小提琴：http://jsfiddle.net/GFV9H/1/