title: Modifying DOM (slideDown/slideUp) with AngularJS and jQuery
body: <p>I'm trying to implement a slideDown/slideUp animation with AngularJS. I can't use CSS3's transition (unfortunately) since the <code>height</code> is set to <code>auto</code> (and I don't want to use <a href="https://stackoverflow.com/a/8331169/1225328">the <code>max-height</code> workaround</a>), so I'm trying to use jQuery's <code>slideToggle</code> method.</p>
  
  <p>Given the following markup:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;ul&gt;
      &lt;li ng-repeat="entry in data"&gt;
          &lt;span&gt;{{entry.title}}&lt;/span&gt;
          &lt;a ng-click="clicked($event)" href&gt;more?&lt;/a&gt;
          &lt;p&gt;{{entry.description}}&lt;/p&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I implemented the following method in my controller:</p>
  
  <pre class="lang-js prettyprint-override"><code>$scope.clicked = function($event) {
      var a = jQuery($event.target);
      var p = a.next();
      p.slideToggle();
  };
  </code></pre>
  
  <p><a href="http://jsfiddle.net/N56vW/" rel="nofollow noreferrer"><strong>FIDDLE</strong></a></p>
  
  <p>Even if it seems to work as expected, I understood that modifying DOM shall be done exclusively within directives.</p>
  
  <p>After having read <a href="http://docs.angularjs.org/guide/directive" rel="nofollow noreferrer">AngularJS' documentation</a> (which I find a bit light IMHO), directives are still a bit vague to me, so could anyone tell me whether the following directive respects <em>AngularJS's best pratices</em> or not?</p>
  
  <pre class="lang-js prettyprint-override"><code>.directive('testDirective', [
  function() {
      return {
          restrict: 'A',
          scope: {
              entry: '=testDirective'
          },
          template: '&lt;span&gt;{{entry.title}}&lt;/span&gt; ' +
                    '&lt;a ng-click="clicked($event)" href&gt;more?&lt;/a&gt;' +
                    '&lt;p&gt;{{entry.description}}&lt;/p&gt;',
          link: function(scope, element) {
              var p = jQuery(element.find('p'));
              scope.clicked = function($event) {
                  p.slideToggle();
              };
          }
      };
  }])
  </code></pre>
  
  <p><a href="http://jsfiddle.net/N56vW/1/" rel="nofollow noreferrer"><strong>FIDDLE</strong></a></p>
  
  <p>Could it be improved? Am I <em>allowed</em> to use jQuery within a directive? Does it respect the <em>separation of concerns</em>?</p>