tl;dr Персонализиран контролер може да бъде прикачен към йонното изскачащо съдържание и по този начин може да управлява всяка сложна логика, работеща в него, без да замърсява обекта на обхвата на родителския изглед на контролера. Тази статия обяснява как това може да се постигне чрез разширяване на съществуващата услуга $ionicPopup, като се използва API за декориране на AngularJs.

Ionic рамката предоставя лесен начин за използване на изскачащи прозорци/диалози с помощта на услугата $ionicPopup. Услугата предоставя API за прости предупреждения, диалогови прозорци за потвърждение с да/не или с друго персонализирано съдържание.

Но за всеки нетривиален случай на употреба, който изисква сложна логика за работа в диалоговия прозорец, обектът на обхвата на изгледа трябва да бъде споделен с услугата за изскачащи прозорци и операционната логика да бъде изхвърлена в обекта на обхвата.

Проблемът

За изскачащи прозорци, изискващи сложно поведение, изискването за споделяне на обекта на обхвата с изскачащия прозорец,

  • може да доведе до замърсяване на обекта на обхвата на изгледа.
  • обезсърчавайте повторното използване на кода, тъй като по-голямата част от логиката в крайна сметка се намира в самия контролер на изгледа.

Решение

Използвайте контролер, за да управлявате персонализираното съдържание в изскачащия прозорец. Можем да предаваме всякакви данни в контролера, като използваме просто инжектиране на зависимости.

Това работи особено добре, когато изскачащият прозорец се използва в повтарящ се работен процес, внедрен като услуга за многократна употреба. Всички или всички подробности за изпълнението могат да се намират в услугата. Предполагам, че това е особено полезно за внедряване на компоненти на потребителския интерфейс за многократна употреба, като инструмент за избор на дата.

Кодът

За да демонстрираме идеята, ще приложим прост изскачащ прозорец за избор на плодове, който позволява на потребителя да избере любимите си плодове.

Първо ще го внедрим с помощта на стандартната услуга $ionicPopup, налична в Ionic, и след това ще използваме контролер, за да капсулираме поведението на изскачащия прозорец.

Целта на двете функции `showFruitSelector` и `showCustomFruitSelector` е абсолютно една и съща, т.е. да предостави на потребителя интерфейс за избор на плод, но както може да забележите, ` Функцията showFruitSelector` изхвърля вътрешния API `onItemSelect` на обекта $scope на изгледа.

Функцията `showCustomFruitSelector` обаче използва контролер за прилагане на същата функционалност, без да замърсява обекта $scope на изгледа.

Ето изпълнението на декоратора, което разширява услугата $ionicPopup.

Декораторът обгръща $ionicPopup `show`, `alert`, `confirm` и `prompt` API и инжектира предоставения контролер в обекта на обхвата. Ако обект на обхват не е предоставен, вместо него използваме обекта $rootScope.

Може да забележите, че инжектираме две персонализирани услуги `$dialog` и `locals` в контролера.

  • `$dialog` може да се използва за затваряне и разрешаване на изскачащия прозорец от самия контролер.
  • `locals` може да се използва за предаване на всякакви данни, които могат да се използват в изскачащия прозорец.

Точно както във всеки контролер, всякакви други услуги също могат да бъдат инжектирани във вашия изскачащ контролер. Това позволява на изскачащия прозорец да бъде толкова богат, колкото е необходимо, без да усложнява обхвата на изгледа.

Демонстрация на декорирания изскачащ прозорец може да бъде намерена на http://rihdus-ionic.github.io (моят демо сайт за йонна кухненска мивка/пясъчник).

Същата идея може да се използва и за контролер с услугата ionic Modal, която всъщност е по-мощна, тъй като предоставеният обект на обхват е достъпен за целия шаблон `ion-modal-view`.

Но

Но не беше възможно да се контролира напълно изскачащият прозорец с помощта на контролера. Както се оказва, компилираният шаблон, предоставен на услугата $ionicPopup, се добавя към частта ‹div class=”popup-body”›‹/div› на изскачащия прозорец . Ние нямаме никакъв контрол върху изскачащата глава или изскачащите бутони.

Подходът е вдъхновен от Angular Material Dialog API, който позволява използването на контролери за добавяне на поведение към диалоговия прозорец, а AngularJs decorator api изглеждаше идеалният инструмент за подобряване на услугата $ionicPopup.

Също така, тук има интересно четиво за това как AngularJs decorator API.