Angular с Jquery. Как включить jQuery в фабрику и использовать/разделять эту фабрику между несколькими контроллерами?

У меня есть более длинная функция jQuery для слайдера галереи изображений. У меня около 5 директив (все используют один и тот же слайдер с разными картинками). Поскольку я не хотел копировать и вставлять один и тот же код jQuery во все 5 контроллеров, я сделал это с помощью фабрики. Я поместил код jQuery в фабрику, а затем вызвал фабрику в каждом контроллере. Это не работает, но я не понимаю, почему. Кто-нибудь знает? Спасибо! РЕДАКТИРОВАТЬ: Jquery включен без углов и работает! Проблема не в самом jQuery, а в фабрике. Если я снова и снова использую один и тот же код jQuery во всех контроллерах, он работает. Это не работает, если я поставлю его на заводе и смогу ли завод в контроллерах. Фабрика:

app.factory('prodsFactory', function ($http) {
  var prodsFactory = {};
    prodsFactory.slider=function(){
       $(function(){
           ...
        })
     }
 })

1-я директива:

app.directive('picturesProject', function () {
    return {
        restrict: 'E',
        templateUrl: 'projects/shop/picturesshop.html',
        scope: {},
        controller: 'shopCtrl',
        link: function(scope){
        }
 }

})

app.controller('shopCtrl', function($scope,prodsFactory){
        return prodsFactory.slider();
});

index.html ...

<script src="projects/shop/picturesshop.directive.js"></script>

...


jquery angularjs angular-directive angular-factory
person javascript2016    schedule 30.01.2017    source источник
comment
Конструктивные функции контроллеров не используют возвращаемые значения, так что же вы ожидаете, когда код вызывает фабричную функцию и возвращает это значение функции построения контроллера?   -  person georgeawg    schedule 31.01.2017
comment
если я не вернусь, а просто позвоню, это тоже не сработает.   -  person javascript2016    schedule 31.01.2017
comment
Опишите проблему. Не работает — это не формулировка проблемы. Расскажите нам, каким должно быть ожидаемое поведение.   -  person georgeawg    schedule 31.01.2017
comment
ну, не работает, я имею в виду, что что-либо, что позволяет понять, что функция jQuery не выполняется. Это работает только в том случае, если я снова и снова помещаю код jQuery в каждый из 5 контроллеров, а не тогда, когда я помещаю его на фабрику и вызываю из контроллеров.   -  person javascript2016    schedule 31.01.2017
comment
Поместите в код несколько операторов console.log. Я думаю, вы обнаружите, что функция jQuery выполняется, но не тогда, когда вы ожидаете. В директивах контроллер создается до вызова функции postLink.   -  person georgeawg    schedule 31.01.2017
comment
Я помещаю несколько console.logs, и абсолютно ничего не происходит, что означает, что вся функция просто не выполняется.   -  person javascript2016    schedule 31.01.2017

Ответы (2)


arrow_upward
0
arrow_downward

Вам необходимо включить jquery перед вашими скриптами angularjs, если вы планируете использовать какие-либо функции jquery, которые не реализованы в реализации jquery lite angular.

person Lee Brindley    schedule 30.01.2017
comment
я сделал. jQuery работает сам. единственное, что не работает, это если я поставлю его на фабрику, а затем попытаюсь вызвать фабрику в контроллерах. - person javascript2016; 31.01.2017
comment
На вашей фабрике вы пытались разместить «возвратную фабрику»? - person Lee Brindley; 31.01.2017

arrow_upward
0
arrow_downward

Если сценарий библиотеки jQuery включен перед сценарием библиотеки AngularJS, jQuery становится доступным как angular.element.

Если jQuery доступен, angular.element является псевдонимом для функции jQuery. Если jQuery недоступен, angular.element делегирует встроенное в AngularJS подмножество jQuery, которое называется jQuery lite или jqLite.

Чтобы использовать jQuery, просто убедитесь, что он загружен перед файлом angular.js. Вы также можете использовать директиву ngJq, чтобы указать, что jqlite следует использовать поверх jQuery, или использовать определенную версию jQuery, если на странице существует несколько версий.

-- Справочник по API AngularJS angular.element

Тем не менее, фабрике нужно что-то вернуть своей строительной функции:

app.factory('prodsFactory', function ($http) {
  var $ = angular.element;
  var prodsFactory = {};
    prodsFactory.slider=function(){
      $(function(){
          console.log("jQuery prodsFactory slider invoked");
      });
    };
  //RETURN prodsFactory to construction function
  //vvvvvvvvvvvvvvvvv
  return prodsFactory;
 });
person georgeawg    schedule 30.01.2017
comment
проблема не в jQuery, а в фабрике. вот что не работает. - person javascript2016; 31.01.2017