JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="app" ng-controller="app" ng-style="{height: totalHeight + 'px'}">
<div size-watch ng-style="{height: (totalHeight / 2) + 'px'}">
Height: {{ height }}
</div>
<div>
<a href="#" ng-click="resize()">Click me</a>
</div>
</div>
CSS
div {
background: #6CCFF0;
}
JavaScript
angular.module("app", [])
.controller("app", ["$scope", function($scope) {
$scope.totalHeight = 50;
$scope.resize = function() {
$scope.totalHeight += 10;
};
}])
.directive("sizeWatch", function() {
return {
restrict: "A",
link: function(scope, elem) {
scope.$watch
(
function() {
return elem[0].offsetHeight;
},
function(newHeight) {
debugger;
scope.height = newHeight;
},
true
);
}
}
});