Wie ruft man eine einfache js Funktion int eckige Komponente Ereignis Rückruf?

Question

Ich habe eine onChange Event-Bindung in meiner eckigen Komponente, die funktioniert so lange ich gebe es eine Funktion eines anderen Winkel-Controller. Wenn ich jedoch eine gewöhnliche js-Funktion überlasse, wird nichts aufgerufen.

Dies ist mein Winkel Vorlage:

<search-input on-change='$ctrl.updateDetected(value)'></search-input> 

Und das ist das die anderen Controller:

import angular from 'angular'; 
import htmlTemplate from './mainWindow.html'; 
import searchInputComponent from './components/searchInput/searchInput'; 

const moduleName = 'woodstore'; 

var module = angular.module(moduleName, []); 

class MainWindowController { 
    updateDetected(searchText) { 
     console.log('In controller: '+searchText); 
    } 
} 

module 
    .component('mainWindow', { 
     template: htmlTemplate, 
     controller: MainWindowController 
    }) 
    .component('searchInput', searchInputComponent); 


function updateDetectedFunction(value) { 
    console.log('In function: '+value); 
} 

Dieser druckt In controller: Text to search for auf der Konsole. Wenn ich die Vorlage zu

<search-input on-change='updateDetectedFunction(value)'></search-input> 

ändern, passiert nichts.

Wie kann ich die updateDetectedFunction() für den Rückruf verwenden?

Answer 1

Ich glaube nicht, dass einfache Funktionen in Vorlage aufgerufen werden können, eckige HTML-Vorlage immer an einen Bereich binden, würden alle Funktionen in der Vorlage eval im Zusammenhang mit diesem Bereich sein, denke ich, nur was Sie tun könnten, ruft die Plain-Funktion innerhalb einer Scope-Funktion:

<search-input on-change='$ctrl.updateDetected(value)'></search-input> 

class MainWindowController { 
    updateDetected(searchText) { 
      updateDetectedFunction(searchText) 
    } 
}