Угловой переключатель DOM

У меня есть несколько пользовательских директив, которые используют jQuery для анимационных эффектов (angular встроенный ngShow/ngHide и т.д. функциональны, но не очень). Я думаю, что я помню, как читал в документации где-то, что angular имеет свой собственный DOM-селектор (что-то вроде angular.export() или angular.select()), которое я должен использовать вместо $(SELECTOR); однако я не могу найти его сейчас.

Я делаю что-то вроде этого:

//view
<div scroll-to="element"> //`element` is set via ng-click
  …
</div>

//directive
link: function(scope, elm, attrs)
{

  scope.$watch(attrs.scrollTo, function scrollToAction(newValue,oldValue)
  {
    if ( newValue !== oldValue )
    {
      elm.animate({
        scrollTop:
          $('#'+newValue).offset().top //replace jquery selector with angular's
          - elm.offset().top
          + elm.scrollTop()
      });
    }
  });

}

Я не манипулирую $('#'+newValue), просто получая информацию об этом, поэтому я не думаю, что совершу преступление против Angular.

Ответы

Ответ 1

"jqLite" (определенный на странице angular.element) предоставляет методы обхода DOM, такие как children(), parent(), contents(), find(), next() (но не previous()). Не существует селекторного метода.

Возможно, вы захотите попробовать JavaScript querySelector.

Ответ 2

Как сообщает официальный документ AngularJs

Все ссылки на элементы в Angular всегда заключены в jQuery или jqLite (например, аргумент element в директиве compile/link функция). Они никогда не являются сырыми DOM-ссылками.

Подробнее: если вы включили jQuery перед ссылкой Angular, функция angular.element() станет псевдонимом для jQuery (иначе jqLite, см. ответ Mark Rajcok).

Вы можете проверить отладчик Dev Tool, если вы получаете jQuery или jqLite, поставив точку останова в строке, где вы вызываете angular.element(). При наведении указателя на него вам будет предложена соответствующая библиотека, см. Снимок экрана ниже (в моем случае я получаю jQuery).

jQuery для <code> angular.element() </code>

Как сообщает официальный документ AngularJs

Для поиска по имени тега попробуйте вместо этого angular.element(document).find(...) или $document.find()

Другими словами: если вы вызываете jQuery при вызове angular.element(), то что-то вроде angular.element('#foo > bar') работает, если это то, о чем вы думаете.

Если вам интересно, как получить эту функцию селектора без jQuery, тогда вы можете использовать Sizzlejs. Sizzle - это библиотека селектора, которую jQuery использует под капотом.