#javascript #html #angularjs #angularjs-directive #angularjs-scope
#javascript #HTML #angularjs #angularjs-директива #angularjs-область
Вопрос:
У меня есть приложение Angular JS, в котором верхний и нижний колонтитулы являются частью index.html, и представления динамически загружаются между ними. У меня есть signOut() функция в области видимости в моих контроллерах, которая выполняет надлежащие вызовы REST API для выхода пользователя. Однако кнопка «Выйти» является частью заголовка, поэтому у меня возникли проблемы с ее вызовом signOut() функции.
ng-click="signOut()" внутри <button> тега абсолютно ничего не делает, предположительно потому, что кнопка находится на странице оболочки, а не в одном из представлений, и поэтому не имеет доступа к области видимости.
В качестве альтернативы использованию ng-click я попытался ввести некоторый код в моем представлении для вызова signOut() функции при нажатии кнопки, поскольку я знаю, что могу получить к ней доступ через DOM. Я впервые попробовал это:
<script>
$('#logoutbutton').on('click', function(){
{{signOut()}};
console.log("signout clicked");
});
</script>
Но это приводит к сбою, Uncaught ReferenceError: signOut is not defined потому что область видимости, по-видимому, недоступна в <script></script> тегах. По той же причине, я подозреваю
<script>
$('#logoutbutton').on('click',
{{signOut()}}
);
</script>
не сработает, даже если попытка использовать этот код выдает синтаксическую ошибку ( Unexpected token '{' ).
Я пытаюсь выяснить, могу ли я каким-либо образом вызвать функцию SignOut () при нажатии кнопки выхода без необходимости делать кнопку частью представления вместо страницы оболочки.
Для любопытных, я контролирую, видна ли кнопка, устанавливая display:none по умолчанию и помещая эту строку в начало всех представлений, где я хочу, чтобы она отображалась:
<script>
document.getElementById('logoutbutton').style.display = 'block';
</script>
именно так я узнаю, что могу получить доступ к кнопке через DOM, даже внутри представлений.
Комментарии:
1. попробуйте сказать
$('#logoutbutton').on('click', $scope.signOut);.2. Не уверен, что вы имеете в виду. Есть два фрагмента, которые используют это.
3. можете ли вы добавить плунжер для этого?
4. Вы могли бы просто поместить контроллер на свою индексную страницу, например. <body ng-controller=»MasterCtrl»> — ваша функция SignOut () затем может быть определена в этом контроллере, и все ваши контроллеры просмотра станут дочерними контроллерами этого.
5. plnkr.co/edit/nglO4r Пятиминутная урезанная попытка; не обязательно работает, но должна по крайней мере показать, как файлы сочетаются друг с другом, если вы знакомы с Angular.
Ответ №1:
У меня это сработало.
<button id="btn">click</button>
$scope.show = function(){alert('msg');}
$('#btn').on('click',$scope.show);
Комментарии:
1. Предположительно, вам не следует давать предложения, основанные на сторонних платформах. Это jQuery и определенно не является хорошим предложением вообще.
2. Это почти работает. Для меня помещение этой строки в контроллер приводит к запуску функции не при нажатии кнопки, а при каждой инициализации представления.
3. Обновление: приведенная выше форма не работает, но когда я заменяю $ scope. показать с помощью анонимной функции, которая вызывает $scope.show, она работает так, как ожидалось.
4.
$scope.show = function(){alert('msg');} $('#btn').on('click',function(){ $scope.show(); });
Ответ №2:
Я должен согласиться с Мостафой Талеби, принятый ответ использует совершенно другую структуру и не является ответом на основе AngularJS. Фактически, единственная проблема, которую я вижу с вашим plunkr, заключается в том, что в главном div отсутствует директива ng-controller, которая должна была бы указывать на ваш контроллер выхода. Затем вы сможете подключить ng-click на вашей кнопке к вашей функции выхода обычным способом. По сути, это то, что предлагает glendaviesnz. Тогда вам не нужно было бы выполнять прослушивание элемента get в javascript и события, что на самом деле не является способом Angular.
В дополнение к этому следует избегать использования событий jquery в приложении angular, поскольку фактически они происходят вне представления angular или, точнее, вне цикла дайджеста angular. Вы можете использовать $on для списка событий в Angular и $broadcast / $emit для трансляции событий.
Ваше требование — это базовый spa с аутентификацией, и на ум приходит множество хороших примеров этого в CustomerManager Дэна Уолена, который демонстрирует, как достичь желаемого чисто угловым способом.