How to properly work with a component in Angular 1.5?

Question

Angular

I am making a component.

app.component('changer', { 
templateUrl: 'changer.html', 
controller: changerController, 
bindings: { 
sostpr: '=', 
} 

});

<changer id="rrr" sostpr="5"></changer>
changer itself:

<div class="bgnk" ng-class="{'prvkl':sostpr==1,'prvikl':sostpr!=1}" value="1" ng-click="chgelem()" ng-swipe-left="chgelem(0)" ng-swipe-right="chgelem(1)" ><div class="krug" ></div></div>

controller:

function changerController($scope, $element, $attrs) { 
var ctrl = this; 
$scope.chgelem=function(sost){ 
alert(ctrl.sostpr) 
if (sost==undefined){ 
if ($scope.sostpr==1){ 
$scope.value=0; 
}else{ 
$scope.value=1; 
} 
}else{ 
$scope.value=sost; 
} 
$scope.sostpr=$scope.value 
ctrl.sostpr=2; 


} 

}

How to hang events correctly? on the html component (as in the example) or inside the controller?
how to get the current state of the changer from the external controller and set it?

Answer 1

1) The external controller cannot "look" into the component scope, if the component must report some changes to its parent, this is done through the '&' binding
https://docs.angularjs.org/guide/component
2) the content of the component controller is available via $ctrl, you don’t need to throw them into the scope with your hands
https://github.com/rwwagner90/angular-styleguide-es6
The event can also be hung in the template, if you suddenly hang the event in the constructor on the element, do not forget to unsubscribe from the event in the destructor