2017-01-01 3 views
0

Я создал простой угловой проект, в котором у меня есть базовый шаблон. Этот базовый шаблон импортирует все необходимые библиотеки, а также запускает в нем простую функцию jQuery. Что-то вроде этого:Функция Javascript не влияет на угловые шаблоны

<html ng-app='myApp'> 
    <body> 
     <div><input type="text"></div> 
     <div ng-view></div> 
     // Imports 
     <script> 
      (function() { 
       $('input').each(function() { 
        $(this).addClass('doSomething'); 
       }); 
      })(); 
     </script> 
    </body> 
</html> 

Таким образом, в основном, функция добавляет класс для всех входных элементов в моем DOM. Эта функция используется для первого элемента ввода вне ng-view.

Однако, допустим, у меня есть элементы ввода в моих шаблонах ng-view, они не зависят от функции. Почему это? Кажется, моя функция jQuery не может получить доступ к DOM моих угловых шаблонов.

Есть ли решение для этого? Каков идеальный способ запуска общей функции, которая может повлиять на угловые шаблоны?

Спасибо.

+0

Почему вы не делаете (или не ищите, если это уже существует) директива? – Maxime

+0

И добавление класса к каждому входу кажется, что вы должны использовать простой класс CSS: 'input {your_code}' – Maxime

+0

@Maxime Почему вы предпочитаете использовать имя элемента в качестве селектора над классом? – 1252748

ответ

0

Шаблоны не так или иначе неявно «включены»; они получают , построенный по угловому коду на лету (и потенциально основан на асинхронных событиях, таких как HTTP-запросы, возникающие после запуска события загрузки на главной странице). Таким образом, вы не можете гарантировать, что DOM будет сконструирован угловым, если вы каким-либо образом не сотрудничаете с угловым.

«Правильный» способ приблизиться к этому, возможно, написать угловую директиву для тегов «ввода», которая добавляет класс (вместо использования jQuery, как вы это делаете выше); и, конечно, это «правильный» способ добавить слушателей событий и т. д.

Смежные вопросы