Angular bindings

readme.md

@ - evaluates the expression and passes the result (String) & - passes a fucntion to child = - Binds the object < - Binds the object - child cannot modify the object itself, child can modify the properties and parent can access, parent can ont change the property to pass to child, parent can channge the object itself to pass to child

bindings.js

var app = angular.module('testApp', []);

app.component('testComponent', {
    bindings: {
        atVal: '@',
        ampVal: '&',
        eqVal: '=',
        lsVal: '<'
    },
    controller: ['$timeout', function($timeout) {

        this.$onInit = function() {
            console.log(this.lsVal);
            this.atVal.x = 0;

            this.eqVal = 10000;
            this.title = "test-component"
        };

        setInterval(() => {
            this.atVal.x = 'hello';
            this.lsVal.x = 444444;

        }, 500)
    }],
    template: '{{$ctrl.title}} -  {{$ctrl.atVal}} {{$ctrl.ampVal()}} {{$ctrl.eqVal}} {{$ctrl.lsVal}}'
});



app.controller('testController', ['$scope', function($scope, $http, $timeout, TestService) {
    var vm = this;

    vm.at = { x: 1 };
    vm.amp = function(p) {
        //console.log('child amp test ' + p);
        return 'blaaa' + p;
    };
    vm.eq = 3;
    vm.ls = { x: 4 };
    setInterval(() => {
        vm.at.x++;
        //vm.amp++;
        vm.eq++;
        vm.ls.x++;
        if (vm.eq > 10005) {
            vm.ls.x = 55555;
        }
        if (vm.eq > 10007) {
            vm.ls = 'hola!';
        }
        console.log(vm.eq);
        $scope.$applyAsync();
    }, 1000);
}]);

index.html

<div ng-app="testApp" ng-controller="testController as vm">
    <test-component at-val="{{vm.at}}" amp-val="vm.amp(2)" eq-val="vm.eq" ls-val="vm.ls"></test-component>
    <p>Parent elemet: {{vm.at}} {{vm.amp(1)}} {{vm.eq}} {{vm.ls}} </p>
</div>