Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 16.10.2013, 16:27
Интересующийся
Отправить личное сообщение для Olival888 Посмотреть профиль Найти все сообщения от Olival888
 
Регистрация: 15.10.2013
Сообщений: 10

Это не стабильно.
Попробуй найти ui-if в angularUI.
Ответить с цитированием
  #12 (permalink)  
Старый 16.10.2013, 17:39
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

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

Последний раз редактировалось DjDiablo, 16.10.2013 в 18:20.
Ответить с цитированием
  #13 (permalink)  
Старый 17.10.2013, 03:51
Профессор
Отправить личное сообщение для Shitbox2 Посмотреть профиль Найти все сообщения от Shitbox2
 
Регистрация: 04.10.2010
Сообщений: 571

Цитата:
не разбрасывали лапшу по кругу
Это не из официальной документации, это я добавил перевод из Ангулярской вики ))) Видимо, какая-то английская идиома)
Ответить с цитированием
  #14 (permalink)  
Старый 17.10.2013, 17:57
Новичок на форуме
Отправить личное сообщение для defreend Посмотреть профиль Найти все сообщения от defreend
 
Регистрация: 15.10.2013
Сообщений: 6

Спасибо всем за советы, будем разбираться.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите найти конфликт скрипта в ИЕ koshsh jQuery 2 21.04.2012 09:32
jQuery: странные вещи при добавлении скрипта wwwboy jQuery 2 18.12.2011 23:32
Конфликт с jquery stvord Элементы интерфейса 3 01.09.2011 22:33
Конфликт Jquery и Mootools Bangoo jQuery 1 28.03.2011 13:03
Переделка скрипта меню на JQuery Bangoo jQuery 1 10.01.2011 13:50