sg-readonly directive (written in TypeScript). Disables all nested fields when condition is met.

sg-readonly

Module.directive("sgReadonly", [() => {

        function toggleDisableAttr(fields:any[], isDisabled:boolean) {
            _.each(fields, (f: any) => angular.element(f).prop('disabled', isDisabled));
        }

        return {
            restrict: "A",
            scope: {
                isReadonly: '=sgReadonly',
            },
            link: (scope, elm, attrs, ctrl) => {

                var fields = elm.find('[ng-model]');

                scope.$watch('isReadonly', (value: boolean)=> {
                    toggleDisableAttr(fields, value);
                });

            }
        };
    }]);