$ctrl, this, $scope, assigning variable to view

I wrote this article basically for myself. Maybe it will be useful for someone.
Angular allows to access variables via:
$ctrl, controllerAs, this, $scope, simple variable name

$ctrl – is default name for controller in view.
So you can use it to access variables inside templates:

function SearchInputController($scope, $log){
var ctrl = this;
$scope.$log = $log;
ctrl.onclick = function(e){
$scope.$emit('search', ctrl.st);
}
}

angular
.module('components.search')
.controller('SearchInputController', ['$scope', '$log', SearchInputController]);

SEARCH

$scope – object serving as glue between controller and view, all what you assign in controller is stored in $scope. In example below $scope.$log variable is available in view as $log. It is discouraged to use, also because $scope is removed in Angular 2

SEARCH

ControllerAs – to change name $ctrl to other name you can use ControllerAs:

var searchinput ={
templateUrl: './searchinput.html',
controller: 'SearchInputController',
bindings: {
st: '='
},
controllerAs: 'somectrl'
}

angular
.module('components.search')
.controller('SearchInputController', ['$scope', '$log', SearchInputController]);

function SearchInputController($scope, $log){
var ctrl = this;
$scope.$log = $log;
this.onclick = function(e){
$scope.$emit('search', ctrl.st);
}
}

    
    
SEARCH