Uncaught ReferenceError: <функция> не определена - тег InnerHTML <script> с угловым
У меня есть компонент в Angular, содержимое которого предоставляется серверной частью, предоставляющей HTML-код. Я добавляю его в компонент как внутренний HTML. В предоставленном HTML есть теги и теги. Однако, хотя я думаю, что стили соблюдаются, я не могу вызвать функцию в теге скрипта.
Тег <script>:
function ToggleDisplayMode(node)
{
var tableHeader = document.getElementById(node);
if (null != tableHeader)
{
var row = tableHeader.nextSibling;
while (row != null)
{
if ( row.style.display != "none" ) {
row.style.display = "none";
}
else {
row.style.display = "";
}
row = row.nextSibling;
}
}
}Как я вызываю эту функцию:
<a onclick = "ToggleDisplayMode(<args>)"><u>show/hide</u></a>
Щелчок не работает, и в консоли появляется следующий вывод:
> Uncaught ReferenceError: ToggleDisplayMode is not defined
> at HTMLAnchorElement.onclick (<args>)
Функция четко определена, поэтому я не понимаю, что я здесь делаю не так.
Я проверил несколько сообщений по этой проблеме, но они основаны на JQuery. Это проблема того, как Angular может обрабатывать внутренний HTML?
Обновлено:
Щелчок должен обрабатываться JavaScript, а не Angular (из-за особенностей этой системы), поэтому ngClick или (click) не будут работать.
Обновлено еще раз:
Очевидно, теги <script> в innerHtml не выполняются согласно эта почта. Тогда придется найти другой способ сделать это.
Это дизайнерская особенность, но этот HTML-код предоставляется имеющимся у нас SDK, а приложение angular было создано на его основе позже. Тот же HTML используется в ряде других клиентских интерфейсов, поэтому я не могу вносить в него изменения. Поэтому я не могу использовать ngClick
На данный момент Angular 4, а <args> - это в основном идентификатор узла в HTML. См. var tableHeader = document.getElementById(node); во второй строке функции.
Если вы откроете консоль и наберете ToggleDisplayMode, она что-нибудь вернет? Если нет, то ToggleDisplayMode не входит в глобальную область видимости.
звучит так, как будто ваша функция не входит в глобальную область видимости.
@epascarello структура что-то вроде <div><script><func></script><all calls to that function></div>
в какой файл вы добавили тег <script>. попробуйте добавить его в src/index.html в теге <head>.
Я попытался поместить сценарий поверх своего HTML-файла, но все равно не работал. Есть какие-нибудь указания о том, как сделать его глобальным?
На мой взгляд, было бы неправильно помещать его в index.html. Функция используется только в определенном месте.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Angular ищет код в файле машинописного текста компонента, поэтому я думаю, вам нужно поместить код туда. Вы можете создать службу для получения кода из серверной части, затем вызвать службу из файла машинописного текста и использовать событие (щелчок) для вызова кода машинописного текста.
Я использую не ngClick, а простой JavaScript onclick, поэтому здесь не должно быть Angular для обработки щелчков.
попробуй это? stackoverflow.com/questions/42530261/…
не может этого сделать, потому что идентификаторы динамические и несколько мест используют одну и ту же функцию
Вам нужно изменить свой код следующим образом:
<a (click) = "ToggleDisplayMode()"><u>show/hide</u></a>
Обратите внимание, что вместо onclick вы должны использовать (click).
Это угловое решение - изменения на этом уровне будут невозможны, поскольку этот HTML-код возвращается SDK, и тот же ответ используется в других, не-Angular интерфейсах.
Угловая версия 9.1.9 машинописный текст 3.8.3
Вы можете добавить файл js в папку с ресурсами
SRC / активы / js / child2.js
function javaChangeCreatedBy() { alert('Set 2 clicked'); var i_createdby = document.getElementById('inputcreatedbyid') var i_value = document.getElementById('inputcreatedbyid').value; }
Следующий html-код показывает оба подхода - для углового щелчка и для html onclick.
SRC / приложение / первый-компонент / первый-компонент.component.html
<p>
Enter Created by:<input id='inputcreatedbyid' type = "text" placeholder = "Enter name" [(ngModel)]=inputcreatedby>
<button type = "button" (click) = "ChangeCreatedBy(inputcreatedby)">Set</button>
<button type = "button" onclick = "javaChangeCreatedBy()">Set 2</button>
</p>
SRC / приложение / первый-компонент / первый-компонент.component.ts
export class FirstComponentComponent implements OnInit {
..
createdby = 'My name';
inputcreatedby='';
ChangeCreatedBy(inputcreatedby:string){
// var inputvalue = document.getElementById("inputcreatedby").value;
this.createdby = inputcreatedby;
}
}
И, наконец, добавьте файл сценария в файл angular.json
{
"projects": {
"architect": {
"build": {
..
"options": {
..
"scripts": [
"src/assets/js/child2.js"
]
}
Однако angular не поддерживает передачу параметра сценария типа в java-функцию.
какую версию angular вы используете? а что здесь
<args>?