2015-11-16 15 views
11

Chciałbym zaimplementować przeciąganie i upuszczanie w moim projekcie Angular przy użyciu modułu kątowego-przeciągnięcia (https://github.com/bevacqua/angular-dragula). Wydaje się jednak, że w dużym stopniu zależy od RequireJS. Nie używam Require przez jakiś czas, a dopiero potem dla przykładowej aplikacji lub dwóch. Czy istnieje łatwy sposób na rozłączenie wymagań z tego modułu?Korzystanie z Angular Dragula bez wymagania JS

Autor wydaje się myśleć, że jest prosty (https://github.com/bevacqua/angular-dragula/issues/23) i zamknął również podobne pytania bez prawdziwego wyjaśnienia. Przyjrzałem się kodowi i nie widziałem, jak załadować moduł bez dodawania RequireJS do mojego projektu (czego nie chcę robić). Czy utknąłem z tym, że nie używam tego modułu lub nie dodawałem Require, czy jest jakiś sposób na użycie tego bez Require?

+0

Przeglądanie źródła wygląda na to, że 'dist/angular-dragula.js' zależy od wymagań, ale wersja minified może tego nie robić. Czy próbowałeś użyć wersji minified, aby sprawdzić, czy działa? – yvesmancera

+0

Tak, zrobiłem to i nie działa. Częścią problemu jest to, że spodziewa się również, że zostanie zainicjalizowany przez podanie w kanciastym, więc mam problem z włączeniem go jako zależności kątowej. – IAmTimCorey

+1

Myślę, że możesz przekazać jej instancję zmiennej globalnej "kątowe", ponieważ 'require ('kątowy') i tak to zwróci. – yvesmancera

Odpowiedz

22

OK, po udzieleniu pomocy tym, którzy skomentowali (dziękuję wszystkim!), Udało mi się to uruchomić. Jest kilka rzeczy, które musisz zrobić. Najpierw łączyłem ten moduł z resztą moich modułów i próbowałem go nazwać. To nie zadziała, ponieważ musi zainicjować za pomocą parametru (angular). W związku z tym, trzeba wykonać następujące czynności:

  1. Dodaj odwołanie do skośnych dragula.js (lub min wersji) na swojej stronie index.html poniżej deklaracji dla kanciasty, ale przede gdzie można stworzyć swoją aplikację.
  2. Po zadeklarowaniu zależności dla swojej aplikacji określ angularDragula(angular) (nie w cudzysłowach).
  3. Używaj draguli jak zwykle. Jeśli potrzebujesz dostępu do usługi, nazwa będzie angularDragula.

Na przykład, tutaj jest moja deklaracja aplikacji:

var app = angular.module('app', [ 
    'ngRoute', 
    angularDragula(angular) 
]); 

A następnie uzyskać prostą listę być przeciągnij i upuść zdolny, to jest mój HTML:

<div dragula='"bag-one"' dragula-model="vm.items"> 
    <div ng-repeat="item in vm.items">{{ item }}</div> 
</div> 

Uwaga że nie deklaruję angularDragula gdziekolwiek, w przeciwieństwie do przykładów. W tym przykładzie autor podaje, że wymaga angular i tworzy zmienną angular, a następnie wymaga angular-dragula i tworzy zmienną angularDragula. Nie jest to konieczne, jeśli nie używasz RequireJS, o ile ładujesz skrypty we właściwej kolejności.

+0

Próbuję tego w mojej aplikacji jonowej. Nie jawnie ładuję kątowo w moim pliku index.html, obsługuje go jonowo. Czy to zmienia, jak bym to zrobił? Robiąc tak jak opisujesz 'angularDragula' zwraca' function register (angle) {... 'ale wywołując go error' nie może odczytać właściwości 'module' undefined' w 'var app = angular.module ('dragula', ['ng' ]); ' –

+0

Załaduję' dist/angular-dragula.js' po ionic, ale przed moim 'app.js' i deklarując' angularDragula (angular) 'w moich zależnościach' app.js' (próbowałem zarówno przed i po zależności jonowej jest ładowany bez żadnej różnicy). –

+1

nevermind To działało. Nie przekazałem prawidłowej zależności do mojego kontrolera (dragulaService). Dzięki za świetne rozwiązanie! –

Powiązane problemy