如果使用 $dirty 和 $pristine 对表单进行任何更改,则不允许进行导航

2023-12-22

如果任何表单发生更改,我会尝试停止在我的应用程序上导航,并尝试在不保存更改的情况下进行导航。

我想显示一个对话框来显示是否保存导航或放弃或取消导航操作。

我正在使用角度用户界面路由 https://github.com/angular-ui/ui-router

app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/dashboard');

    $stateProvider
        .state('dashboard', {
            url: '/dashboard',
            templateUrl: '/application/private/views/dashboard.html'
        })
        .state('websites', {
            url: '/websites',
            templateUrl: '/application/private/views/websites.html'
        })
});

我计划进行类似使用 AngularJS 服务单例的实现

app.service('dirtyCheckService', function ($rootScope, dialogService){


});

在控制器级别我可以像这样编写提交点击

app.controller('formSubmitCtrl', function ($scope, dirtyCheckService){
dirtyCheckService.checkForm($scope).then(function(){
   //allow navigation
   },function(){
   //not allowed}
});

我不确定是否已经存在简单的方法

感谢您


答案是:可以将这种检查移至服务/工厂 - 以便进一步重用。另外,这里有一些例子至少展示了如何 -plunker http://plnkr.co/edit/Y7q7i4Qa8Ae7tdFi9fyw?p=preview

一个工厂:

.factory('CheckStateChangeService', function($rootScope){

  var addCheck = function($scope){ 

    var removeListener = $rootScope.$on('$stateChangeStart'
        , function (event, toState, toParams, fromState, fromParams) {

          if($scope.form.$pristine)
          {
            return;
          }

          var shouldContinue = confirm("The form has changed" +
                 ", do you want to continue without saving");
          if(shouldContinue)
          {
            return;
          }
          event.preventDefault();
    }); 

    $scope.$on("$destroy", removeListener);
  };

  return { checkFormOnStateChange : addCheck };
})

并且拥有一个view像这样:

<div>
    <form name="form">

      <dl>
        <dt>Name</dt>
        <dd><input type="text" ng-model="person.Name" />
        <dt>Age</dt>
        <dd><input type="number" ng-model="person.Age" />
      </dl>

    </form>
</div>

和控制器:

.controller('MyCtrl', function($scope, CheckStateChangeService) {

  $scope.person = { Name: "name", Age: 18 };

  CheckStateChangeService.checkFormOnStateChange($scope);

})

有一个example http://plnkr.co/edit/Y7q7i4Qa8Ae7tdFi9fyw?p=preview

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如果使用 $dirty 和 $pristine 对表单进行任何更改,则不允许进行导航 的相关文章

随机推荐

  • 如何在 ADO.NET 实体数据模型中连接到 Oracle

    当我问这个问题时 有人建议我在这里使用实体框架 构建数据层 强类型数据集和类哪个更好 https stackoverflow com questions 1287407 how is better to build data layer s
  • MySQL插入多个表(关系型)

    tbl product Name Creator UID Salerank tbl price Supplier Price UID 我想插入一个产品 然后将多个价格插入到一个单独的表中 如何确保两个表具有相同的 UID 最好是自动增量字段
  • BLL、DAL、BO、插入数据

    我需要你的建议 我正在尝试在 ASP NET 中开发一个 3 层架构 将 BBL DAL BOboj 分开 在 DAL 内部 我通过 view 收集数据 我想知道 我应该为每个视图编写另一个 BOboj 吗 我已经有一个 BOboj 类 但
  • 计算行之间的日期差异

    我有一个 data table 我想在其中标记给定组 ID 的先前条目 90 天内的条目 背景是这些是交易的买入信号 所以我不希望在 90 天的窗口内重复 因为我假设我持有该头寸 90 天 因此已经购买了一个头寸 并且我不想重新启动时钟 所
  • 在Python中从列表中获取N个最小或最大元素的快速方法

    我目前有一个很长的列表 正在使用 lambda 函数 f 进行排序 然后我从前五个元素中选择一个随机元素 就像是 f lambda x some function of x local variable my list sort key f
  • opencv中的视频文件

    我想读取视频文件 avi 或 mov 并使用 Opencv 检测运动和边缘 你能帮我编写代码吗 我想创建一个 GUI 在其中我们可以选择视频文件 然后我们可以进行图像处理opencv中的函数 如何读取视频文件 读取视频文件并将其显示在窗口上
  • Android 相机预览旋转

    根据 Android 开发者网站 android 2 2之后有这个功能 设置显示方向 调整相机预览旋转 并且根据Android开发者网站 我们可以找到以下源代码 android hardware Camera CameraInfo info
  • 初始化锯齿状数组

    我想在 C 中创建数组 10 10 10int not int 我可以写代码 int count new int 10 for int i 0 i lt 10 i count i new int 10 for int j 0 j lt 10
  • JavaScript:检查 CTRL 按钮是否被按下

    I need to check if the CTRL button was pressed while I am clicking on a control on my html page using JavaScript 我怎样才能做到
  • 以平滑的结果对 CSS 背景位置进行动画处理(子像素动画)

    我正在尝试缓慢地为 div 的背景位置设置动画 但不会出现不稳定的运动 您可以在这里看到我当前努力的结果 http jsfiddle net 5pVr4 2 http jsfiddle net 5pVr4 2 webkit keyframe
  • CoffeeScript:在函数调用中扩展数组

    在 Ruby 中 我可以调用使用数组元素作为位置参数的方法 如下所示 method fixed arg1 fixed arg2 array of additional args 这里的 运算符将数组扩展到位 我试图在 CoffeeScrip
  • Intellij IDEA 找到匹配的标记

    是否有快捷方式或我可以单击以查找标记标签的匹配标签并将焦点 光标移至那里 例如 p span span p div div 如果我的光标位于结束位置标签 我希望 IDEA 带我去参加开幕式 tag Ctrl goes to the open
  • Google 地图:DirectionService 返回 OVER_QUERY_LIMIT 响应

    我正在使用 google maps DirectionsService 来获取两点之间的路线 该代码在过去 8 个月内一直有效 但是 从过去的几天来看 DirectionService 路由调用返回 OVER QUERY LIMIT 响应状
  • jQuery 选择器中允许使用哪些字符?

    我正在使用 jQuery 平滑滚动到我网站上的某些锚点 锚点是以编程方式创建的 因此它们可以包含一些德语变音符号 例如 或其他 unicode 字符 例如 等 该函数使用哈希来选择哈希所引用的元素 Smooth scroll to anch
  • 哪一行的值最高?

    我有多个提名人和民意调查的选举结果表 我需要确定每次民意调查中哪位提名人获得最多票数 以下是表中数据的示例 PollID NomineeID Votes 1 1 108 1 2 145 1 3 4 2 1 10 2 2 41 2 3 0 我
  • Android ListView 子视图 setEnabled() 和 setClickable() 不执行任何操作

    我正在做一些AsyncTask用户单击我的项目后工作ListView 我想禁用该项目 这样它就不能被单击两次 我已经简化了单击侦听器以仅包含此方法 但它仍然对我没有任何作用 视图看起来相同 并且它让自己再次被愉快地单击 这让我很烦恼 pub
  • 如何在 Swift 中传递和获取多个 URL QueryItem?

    好的 我正在 iMessage 应用程序中工作 并尝试从此处所选消息中解析超过 1 个 url 查询项 我已成功在查询中获取 发送 1 个值 override func willBecomeActive with conversation
  • 使用 Boost.regex 从目录打印 .pdf 文件名

    这是我的代码 path Path e Documents boost regex reg pdf for recursive directory iterator it Path it recursive directory iterato
  • 在Python中对pandas中的数据框进行分箱[重复]

    这个问题在这里已经有答案了 给定 pandas 中的以下数据框 import numpy as np df pandas DataFrame a np random random 100 b np random random 100 id
  • 如果使用 $dirty 和 $pristine 对表单进行任何更改,则不允许进行导航

    如果任何表单发生更改 我会尝试停止在我的应用程序上导航 并尝试在不保存更改的情况下进行导航 我想显示一个对话框来显示是否保存导航或放弃或取消导航操作 我正在使用角度用户界面路由 https github com angular ui ui