Вот два примера как можно разместить код 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 это вполне безопасно так как кэлбэк таймаута гарантированно сработает после рендеринга и иначе быть не может
