Обгон контроля другого модуля над пользовательским интерфейсом в угловом

Question

Я пытаюсь создать обучающий модуль с Angular для моего стандартного углового модуля (что-то, чтобы показать пользователю, как использовать пользовательский интерфейс, так как некоторые из наших пользователей - довольно старые люди, которым нужно немного помощи). При этом я хочу, чтобы учебник получал доступ к основному приложению и контролировал все. До сих пор я могу добавить данные в модель, а главное проглатывает ее без каких-либо проблем, что упрощает добавление макетов для объяснения.

Это означает, что когда пользователь нажимает на элементы или взаимодействует с ними, я не хочу отправлять какой-либо запрос на сервер, так как это учебник, подделка, макет, поэтому я хочу отключить стандартное поведение по крайней мере для элементов учебника и добавить свои собственные (возможно, перейдите к следующему шагу по учебнику).

Но я не хочу использовать директивы или булевы на модели типа «isThisTutorial» или «isTutorialOn», поскольку я хочу изолировать учебник и сделать его независимым от основного, я не хочу, чтобы основной проект должен знать что-либо о учебнике, за исключением того, что я вызываю, чтобы активировать его.

Я думал, что могу попытаться получить доступ к элементам с помощью jQuery и переопределить поведение, но он, похоже, не работает, поскольку у Angular все еще есть элемент управления (или, может быть, я что-то делаю неправильно). Поэтому, имея в виду, что у меня есть доступ к той же области видимости, и я могу изменить модель по своему усмотрению, как я могу взять элемент управления пользовательского интерфейса от основного контроллера с помощью моего модуля управления учебником? Это возможно?

Спасибо.

Update Примечание: Я обнаружил, что JQuery на самом деле работает, только проблема в том, что Угловая еще не переварили новые данные о модели, так что элемент еще не на DOM, когда я пытаюсь получить доступ к нему. Тем не менее, открываются альтернативы.

Answer 1

Ну, решение я пришел в конце концов, не может быть лучшим, но разделяя его, как это может помочь кому-то еще:

Прежде всего, я могу добавить фиктивные данные в модели, которая отображается в пользовательском интерфейсе, как и должно быть, но перед доступом к DOM мне нужно подождать, пока Angular не сгенерирует элементы и не добавит их туда. Поэтому я использую угловые $ применяются:.

$scope.Conversations.push(mockData); 
    $scope.$apply(); 

Это отображает сообщение об ошибке на консоли: «Ошибка: [$ rootScope: inprog] $ применять уже в процессе», но он работает, без того, чтобы она Безразлично» т.

Теперь, сразу после этого у меня есть доступ к элементу DOM, и я могу получить его с помощью document.getelementById или, поскольку у меня есть jQuery, просто селектор $ ("# myId"). После того, как у меня есть элемент, мне нужно только сказать, Угловое, чтобы «отпустить» на отменяя его с этим:

function RemoveAngularBounds(object) { 
    angular.element(object).unbind(); 
} 

Теперь, снова используя JQuery, я могу добавить «нажмите кнопку» событие на него и определить его новое поведение, отменяющее одно Угловое, дало это.

var target = $("#myId"); 
    RemoveAngularBounds(target); 
    $(target).click(function (e) { 
     //e.stopImmediatePropagation(); 
     //e.preventDefault(); 
     $scope.step2(); 
    }); 

Я думал, что мне нужно, чтобы предотвратить распространение и предотвратить дефолт, но не стал, несмотря на это, оставив его там, как это может помочь кому-то.

Остальное просто показывает некоторые плавающие сообщения пользователю вокруг пользовательского интерфейса. Если вам нужно деактивировать и активировать угловое поведение элемента, я думаю, вы можете попробовать с .bind(), но вам нужно это проверить.

Answer 2

То, что вы пытаетесь выполнить, довольно сложно и, насколько я мог бы найти (прошло некоторое время с тех пор, как я искал его), нет рамки из коробки (есть некоторые js-страницы пошаговая схема вокруг here, является одной), которая выполняет этот тип управления, хотя некоторые из них будут маскировать пользовательский интерфейс, чтобы предотвратить управление пользователем .
Тем не менее, для конкретных задач, вы подняли, вот несколько вариантов:

1. Что касается предотвращения реальных запросов сервера, вы всегда можете издеваться над этими услугами (или $ HTTP сам ресурс). Here это делается для тестирования, но вы, очевидно, можете использовать его для других целей, таких как ваши. Самое замечательное в том, что вы можете точно контролировать, что возвращается, и поэтому, если пользователь учебника создает причину создания сущности, вы можете точно контролировать, как должен выглядеть этот объект, и сделать его подходящим для вашего учебника. Это также означает, что во втором учебник сделан - ничего не нужно делать.
   Если вы используете другие методы (например, jQuery AJAX, существуют эквивалентные методы).
2. Поскольку обработка событий очень важна, вы можете фактически переопределить некоторые из углов в директивах (или любой из ваших собственных) и ввести определенную логику вашего учебника - то есть - предотвратить щелчок и разрешить только определенные клики, представляя всплывающее окно для некоторые события и т. д.
   Here - пример переопределения ngClick.
3. Вы также можете украсить услуги углового (или вашего) и ввести свою собственную логику, которая может помочь перехватить поведение. Here - простой декоратор, а Here - еще один сложный пример создания шины событий для вашего приложения, которая затем может использоваться как флаг уведомления для событий (что может помочь развязать различные части ваших приложений).

Чтобы скомпоновать эти аспекты, я бы создал учебный модуль, который будет проходить только в учебном режиме.