AngularJS invoke Controller function

Question

sorry for the rather basic question but I am really a beginner developing in AngularJS. So I have a conteoller like this (like explaned here: https://github.com/johnpapa/angular-styleguide):

(function() {
'use strict';

angular
    .module('project.management')
    .controller('ManagementController', ManagementController);

function ManagementController() {
    var vm = this;
    vm.getUsersBySearchString= getUsersBySearchString;

    ////////////

    function getUsersBySearchString(searchString) {
        alert('get User By searchstring: ' + searchString);         
    }
};
})();

Now I have a HTML fragment in my template and I really don't know how to invoke function getUsersBySearchString(searchString). I have tried this one:

<div ng-controller="vm">
<form class="well form-search">
    <label>Usersuche:</label>
    <input type="text" ng-model="term" class="input-medium search-query" placeholder="Username">
    <button type="submit" class="btn" ng-click="getUsersBySearchStringgetUsersBySearchString()">Suchen</button>
</form>
<pre ng-model="result">
{{result}}
</pre>
   </div>

but I don't know what to put here

<div ng-controller="vm">

and how to invoke the method. Thanks a lot for help!

ng-controller="ManagementController as vm"

Brian Glaz
– Brian Glaz

2015-08-04 13:44:45 +00:00
Commented Aug 4, 2015 at 13:44 — Brian Glaz
– Brian Glaz, Commented Aug 4, 2015 at 13:44

JB Nizet · Accepted Answer · 2015-08-04 13:45:10Z

5

<div ng-controller="vm">

That is incorrect. You have no controller named "vm". Your controller is named ManagementController.

The syntax for your use-case is

<div ng-controller="ManagementController as vm">

And to invoke the function, you would use

ng-click="vm.getUsersBySearchString(term)"

Note that the alias you choose in the HTML has no relationship with the alias you chose for thisin the controller code. You might very well use

<div ng-controller="ManagementController as managementCtrl">

and

ng-click="managementCtrl.getUsersBySearchString(term)"

answered Aug 4, 2015 at 13:45

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS invoke Controller function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related