Controllers¶

Overview¶

You can invoke a controller using directive al-ctrl=”controllerName”, also you can declare a top controller in directive al-app=”controllerName”.
Your controller should be placed in alight.ctrl.controllerName or in scope.$ns.ctrl for a private controller or in global window.
Your controller can be a simple function or a class.
If your controller is a class (has a prototype), then Scope’s methods ($scope, $watch, $getValue etc) are available in “this”.

Example controller as function¶

<div al-app="main">
    {{myVar}}
</div>

Example controller as function¶

alight.ctrl.main = function(scope) {
    scope.myVar = 123;
}

Example controller as function¶

function main(scope) {
    scope.myVar = 123;
}

Example controller as a class¶

<div al-app="main">
    <button al-click="click()">Click</button>
    {{name}}
</div>

Example controller as a class¶

function main() {
    this.name = 'linux';
}
main.prototype.click = function() {
    this.name += '!'
}

Controller in TypeScript¶

class main {
    constructor() {
        this.name = 'linux';
    }

    click(value) {
        this.name += '!'
    }
}

Controller in CoffeeScript¶

class main
    constructor: () ->
        @.name = 'linux'

    click: () ->
        @.name += '!'