使用Angular.js移动到另一个页面时,窗体内的指令不起作用

时间:2015-10-30 04:13:56

标签: javascript angularjs forms angularjs-directive

我在这里有一个问题。我的应用程序中有一个表单,我的要求是当用户导航到另一个页面而没有提交此表单时,将显示一条确认消息,使用angular.js警告用户。我在下面解释我的代码

library(data.table)
setDT(data)[, list(mean_returns = mean(returns)) , by = fyear]

我的控制器页面中有以下代码。

<form name="billdata" id="billdata" confirm-on-exit enctype="multipart/form-data" novalidate>
    <span class="input-group-addon ndrftextwidth text-right" style="width: 180px;">First Name :</span>
    <input type="text" name="itemname" id="contactno" class="form-control" placeholder="user Name" ng-model="first_name">
    <span class="input-group-addon ndrftextwidth text-right" style="width: 180px;">Last Name :</span>
    <input type="text" name="itemname" id="contactno" class="form-control" placeholder="user Name" ng-model="last_name">
    <div style="text-align: center; padding-top: 10px;">
        <input type="button" class="btn btn-success" ng-click="addUserData(billdata);" id="addProfileData" value="submit" />
    </div>
</form>

我在用户完全离开页面网站时收到确认消息。但我的要求是当用户导航到另一个页面而未提交此表单时,应显示确认消息。请帮助我。

1 个答案:

答案 0 :(得分:1)

好的,所以我创建了一个包含两条路线的小项目。演示如何做你想要的......这是你的代码片段,所以只需要你需要的东西

该指令已更改为:

.directive('confirmOnExit', function() {
return {
  require:'form',
        link: function($scope, elem, attrs,formController) {
            window.onbeforeunload = function(){
                if (formController.$dirty) {
                    return "The form is not saved, do you want to stay on the page?";
                }
            }
               $scope.$on('$locationChangeStart', function (event, next, current) {
            if (formController.$dirty) {
                if (!confirm("The form is dirty, do you want to stay on the page?")) {
                    event.preventDefault();
                }
            }
        });
          }
    };

});

并非我添加了require表单,使其对您要使用的所有表单都是通用的。

这只会考虑$ dirty所以如果你也想要$ invalid添加条件和$ submit

**这里是** PLUNKER,带有工作示例......