Javascript-форум - Конфликт jQuery скрипта и AngularJS

Вот два примера как можно разместить код jquery внутри директивы

Решение 1

делаем крошечную директиву

projectModule.directive('clickhide',function(){      
            return function($scope,$element){
              $element.children().hide();
              $element.on('click',function(){
                $(this).children().toggle();
              });
            }              
          })

Смотрим в работе

<!DOCTYPE HTML>
  <html ng-app="project">
    <head>               
      <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>   
      <script src="http://code.angularjs.org/angular-1.0.1.js"></script>                   
    </head>
    
    <body >      
      <script>            
          var projectModule = angular.module('project',[]);  
  
          // наша директива 
          projectModule.directive('clickhide',function(){      
            return function($scope,$element){
              $element.children().hide();
              $element.on('click',function(){
                $(this).children().toggle();
              });
            }              
          })
              
          function FirstCtrl($scope) {	    
            $scope.data=[1,2,3,4,5,6];    
          }         
      </script>
  
      <div ng-controller="FirstCtrl">
        <ul>
          <li ng-repeat="i in data" clickhide>Кликни по мне {{i}} <br/>
              <ul>      
                <li>пример 1</li>
                <li>пример 2</li>
                <li>пример 3</li>
              </ul>  
          </li>		   		
        </ul>  
      </div>
  
    </body>
  </html>

Помучить здесь

Решение 2
Используем делегирование событией

<!DOCTYPE HTML>
  <html ng-app="project">
    <head>               
      <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>   
      <script src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>                   
    </head>
    
    <body >      
      <script>            
          var projectModule = angular.module('project',[]);  
  
          // наша директива 
          projectModule.directive('clickhide',function(){      
            return function(scope,element){
              
              //вопрос чем замеить setTimeout остается открытым 
              //так как link post это последний callback
              //Впрочем содержимое можно скрыть при помощи CSS
              setTimeout(function(){
              	$('.s',element).children().toggle();
              },1)
              
              $(element).on('click','.s',function(){
              	 $(this).children().toggle();
              })
            }                                  
          })
              
          function FirstCtrl($scope) {	    
            $scope.data=[1,2,3,4,5,6];    
          }         
      </script>
  
      <div ng-controller="FirstCtrl">
        <ul clickhide>
          <li ng-repeat="i in data" class="s"  >Кликни по мне {{i}} <br/>
              <ul>      
                <li>пример 1</li>
                <li>пример 2</li>
                <li>пример 3</li>
              </ul>  
          </li>		   		
        </ul>  
      </div>
  
    </body>
  </html>

Помучать можно здесь
Несмотря на то что я применил setTimeout это вполне безопасно так как кэлбэк таймаута гарантированно сработает после рендеринга и иначе быть не может