How to call a plain js function int angular component event call back?

Question

I have an onChange event binding in my angular component, which works fine as long I give it a function of an other angular controller. However if I pass an ordinary js function nothing is called.

This is my angular template:

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

And this is the the other 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);
} 

This prints In controller: Text to search for on the console. If I change the template to

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

nothing happens.

How can I use the updateDetectedFunction() for the call back?

Answer 1

I don't think plain functions could be called in template, angular html template always bind to a scope, any functions in template would be eval in the context of that scope, I think only thing you could do is calling the plain function within a scope function:

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

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