Skip to content

Instantly share code, notes, and snippets.

@shankscript
Created February 6, 2018 13:27
Show Gist options
  • Save shankscript/5a1ddd69f07b8447e5cb168d64c982c6 to your computer and use it in GitHub Desktop.
Save shankscript/5a1ddd69f07b8447e5cb168d64c982c6 to your computer and use it in GitHub Desktop.
Angular bindings

@ - 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

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);
}]);
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment