JSFiddle - React, Tailwind, and code Playground

by terebentina

HTML

<div ng-app="app" ng-controller="mainCtrl">
    <div ng-repeat="page in pages">
        <input type="text" class="parent" value="{{page.config.value}}">
        <input type="text" class="child" ng-repeat="element in page.elements" value="{{element.config.value}}">
        <button ng-click="mess_with_parent()">do something</button>
    </div>
</div>

CSS

.parent {
    width: 50px;
    height: 50px;
    background-color: #f00;
}

.child {
    width: 49px;
    height: 49px;
    background-color: #0f0;
}

JavaScript

angular.module('app',[])
    .controller('mainCtrl', function($scope) {
        $scope.pages = [{config: {value: 100}}];

        $scope.mess_with_parent = function(val) {
            this.pages[0].config.value = 200;
        };
    })
    .directive('parent', function() {
        return {
            restrict: 'C',
            link: function(scope, element, attrs) {
                scope.$watch('parent_width', function(newValue, oldValue) {
                    element.css('width', newValue+'px');
                });
            }
        };
    })
    .directive('child', function() {
        return {
            restrict: 'C',
            link: function(scope, element, attrs) {
                scope.$watch('parent_width', function(newValue, oldValue) {
                    element.css('width', newValue+'px');
                });
            }
        };
    })
;