Is there any way to check the whole page is dirty or not?

Question

i am new at angularJS, i want to check my page is dirty or not. i know how to check dirty form but not whole page(like i am using directive in this form).is there any way to check directive part is dirty or not? like in my page i have directive for star rating. in that if i change rating then i want to check the page is dirty or not?

<form name="reviewForm">     
        <div class="row">
            <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div>
                    <table class="rwd-table table-responsive table-bordered table-striped" >
                        <tbody>
                            <tr data-ng-repeat="review in reviewModifyData.review.KeyAreaList" >
                                <td  class="mywidth">
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
                                        <strong class="reviewPadding">
                                            <span  data-ng-bind="review.Title"></span>
                                        </strong>
                                        <br>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                        <small class="reviewPadding"><span data-ng-bind="review.HelpText | limitTo:150"></span><span tooltip-placement="auto" uib-tooltip="{{review.HelpText}}"  data-ng-show="review.HelpText.length > 150">...</span></small>
                                    </div>
                                </td>                                                       
                                <td >  
                                        <span class="visible-sm visible-xs"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                        <angular-star-rating min="reviewModifyData.minValue" max="reviewModifyData.review.RatingLevel"
                                                             value='review.Rate' hover='reviewModifyData.changeOnHover'
                                                             is-readonly='reviewModifyData.isReadonly'>                                 
                                        </angular-star-rating>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <br>

                    <div class="row"  data-ng-if="reviewModifyData.section.length !== 0" data-ng-class="{'has-error': reviewForm.$submitted && reviewForm.Remark.$invalid,'has-feedback': reviewForm.$submitted && reviewForm.Remark.$valid}">
                        <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <label class="control-label" > Remark</label> <span data-ng-if="reviewModifyData.review.IsRemarkMandetory" class="errortext">*</span>
                            <div class="has-feedback">
                                <textarea class="form-control noresize"  data-ng-if="!reviewModifyData.review.IsRemarkMandetory" rows="3"  name="Remark" placeholder="Enter Remark"  data-ng-model='reviewModifyData.review.Remark' ></textarea>
                                <textarea class="form-control noresize" required data-ng-if="reviewModifyData.review.IsRemarkMandetory" rows="3"  name="Remark" placeholder="Enter Remark"  data-ng-model='reviewModifyData.review.Remark' ></textarea>
                            </div>
                            <span class="text-danger" data-ng-show="reviewForm.$submitted && reviewForm.Remark.$error.required">Please Enter Remark <i class="fa fa-exclamation-circle"></i></span>
                        </div>
                    </div>    
                </div>
            </div>
        </div>
</form>

now i have tried in my js like this.

if ($scope.reviewForm.$dirty) {
                toastr.error('The form is dirty, do you want to stay on the page?');
                return;
            }

Thanks in advance,

Answer 1

you can access formController in your directive (look at this answer) than use $setDirty() method