<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<outer-component my-outer-disabled-property="isDisabled"></outer-component>
<label>
<input type="checkbox" ng-model="isDisabled" />
Disable
</label>
</body>
</html>
var app = angular.module('app', []);
app.component('outerComponent', {
controller: (function() {
function OuterController() { this.myOuterDisabledProperty = false }
return OuterController;
})(),
templateUrl: 'outerComponent.html',
bindings: { myOuterDisabledProperty: '=' }
});
app.component('innerComponent', {
controller:(function() {
function InnerController() { this.myInnerDisabledProperty = false }
return InnerController;
})(),
templateUrl: 'innerComponent.html',
bindings: { myInnerDisabledProperty: '=' }
});
/* Styles go here */
<div style="background-color: #eee; padding: 10px">
<h2>Outer Component - disabled: {{$ctrl.myOuterDisabledProperty}}</h2>
<inner-component my-inner-disabled-property="$ctrl.myOuterDisabledProperty"></inner-component>
</div>
<div style="background-color: #ddd; padding: 10px">
<h3>Inner Component - disabled: {{$ctrl.myInnerDisabledProperty}}</h3>
<input type="text" value="some input" ng-disabled="$ctrl.myInnerDisabledProperty" />
</div>