title: Angular directive and Jquery slideToggle function implementation
body: <p>Using angular and jquery I implemented slideToggle function. In order to only apply this function to one specific HTML element, I am using within ng-click function one parameter, my code works fine but, I want to know if exists another better way to implement directives and ng-click functions in angular:</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp" ng-controller="MainController"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link type="text/css" rel="stylesheet" href="css/styles.css"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div&gt;
          &lt;input type="button" ng-click="toggle('first')" value="Toggle First"&gt;
          &lt;input type="button" ng-click="toggle('second')" value="Toggle Second"&gt;
          &lt;input type="button" ng-click="toggle('third')" value="Toggle third"&gt;
          &lt;div class="div1" section="first" toggle="first" &gt;
              &lt;p&gt;This is section #1&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="div1" toggle="second"&gt;
              &lt;p&gt;This is another section #1&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="div1" toggle="third"&gt;
              &lt;p&gt;This is 3 section #1&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;footer&gt;
      &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/angular.js"&gt;&lt;/script&gt;
      &lt;script src="js/directives.js"&gt;&lt;/script&gt;
  &lt;/footer&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>styles.css</strong></p>
  
  <pre><code>.div1 {
      background: Brown;
      width: 200px;
      height: 200px;
      text-align: center;
  }
  .div1 p {
      position: relative;
      top: 50%;
  }
  </code></pre>
  
  <p><strong>directives.js</strong></p>
  
  <pre><code>angular.module("myApp", []) //
      .controller('MainController', function($scope) {
          $scope.toggle = function(section) {
              console.log('&lt;toggle function&gt; section :' + section);
              $scope.section = section;
              $scope.$broadcast('event:toggle');
          }
      }) //
      .directive('toggle', function() {
          return function(scope, elem, attrs) {
              scope.$on('event:toggle', function() {
                  if(attrs.toggle == scope.section){
                      elem.slideToggle('fast');
                  }
              });
          };
      });
  </code></pre>
  
  <p>One concern of my own is the way that I am communicating between directive and scope:</p>
  
  <pre><code>        $scope.section = section;
  </code></pre>
  
  <p>and </p>
  
  <pre><code>        if(attrs.toggle == scope.section){
  </code></pre>
  
  <p>I will appreciate any advice for a better Angular implementation.</p>
  
  <p>Thanks</p>