同一页面上的多个表单使用同一指令和元素指令中的一种表单

Question

背景：我正在尝试创建一个"停止导航"，如果形式为肮脏"指令。我已经看了几个问题/示例，因此我将某些功能有效，但不太正确。我正在尝试将此指令用作整个Web应用程序中多个表单的属性。

问题：我有一个页面，其中包含两个<form>元素（" form1"one_answers" form2"），它们嵌套在<tab>元素中。Form2进一步嵌套在自定义元素指令中。

当两种形式都很肮脏，并且我尝试导航到另一个页面（UI路由器更改）时，我会从及时服务中获得预期的自定义提示。但是，如果我尝试重新加载页面，则只有在Form2肮脏时才会生成浏览器提示。form1脏时没有任何提示。

有人可以指导我如何在Form1肮脏时生成浏览器提示

---

相关HTML

<!-- "main" view -->
<tabset>
    <tab heading="Heading1">
        <form name="FORM1" class="form-horizontal" form-dirty>
            <!-- FORM STUFF -->
        </form>
    </tab>  
    <tab heading="Heading2">
        <this-contains-form2 data="objOnScope"></this-contains-form2>
    </tab>
</tabset>
<!-- "thisContainsForm2" template -->
<form name="FORM2" class="form-horizontal" form-dirty>
    <!-- FORM STUFF -->
</form>

---

相关JavaScript

// "form-dirty" directive
angular.module('webapp.shared').directive('formDirty', ['$state', 'DlgPromptService', function($state, DlgPromptService) {      
    return {
        scope: {theForm: '=name'},
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.$watch('theForm', function () {
                // if there's a UI router change    
                scope.$on('$stateChangeStart', function (event, toState, toParams){
                    // WHEN FORM1 DIRTY:  PROMPT AND CONSOLE-LOG BOTH FORMS
                    // WHEN FORM2 DIRTY:  PROMPT AND CONSOLE-LOG BOTH FORMS
                    console.log(scope.theForm);
                    // if form was not modified
                    if ( !scope.theForm.$dirty ) {
                        return;
                    }
                    else {
                        // if form was modified then intervene
                        // halt the route change
                        event.preventDefault();
                        // prompt user
                        DlgPromptService.confirm('Unsaved Changes',
                            'This form has unsaved changes.<br/>'
                            +'Are you sure you want to leave?')
                        .then(function () {
                            // we will proceed with the route change
                            scope.theForm.$setPristine();
                            $state.go(toState.name, toParams);
                        })
                    }
                })
                // if there's a window change (reload, etc)
                window.onbeforeunload = function (event) {
                    // WHEN FORM1 DIRTY:  NO PROMPT, NO CONSOLE LOG
                    // WHEN FORM2 DIRTY:  PROMPT AND CONSOLE-LOG FORM2
                    console.log(scope.theForm);
                    // if form was not modified             
                    if ( !scope.theForm.$dirty ) {
                        return;
                    }
                    else {
                        // prompt
                        return "prompt";
                    }
                }
                scope.$on('$destroy', function() {
                    window.onbeforeunload = undefined;
                })  
            })
        }
    }
}])
// "thisContainsForm2" directive
angular.module('webapp.shared').directive('thisContainsForm2', function() {
    var controller = function($scope, $http, $state, DlgPromptService) {
        // CONTROLLER STUFF
    }
    return {
        scope : {data: '='},
        templateUrl : 'shared/thisContainsForm2.html',
        controller : controller
    }
})

Answer 1

如果使用UI引导程序选项卡实现，则必须知道所有选项卡总是呈现的，但是所有不活动的选项卡都设置为'display：none''

在这种情况下，这两个表单指令同时均处于活动状态，这是一个问题，因为第二个选项卡覆盖了第一个选项卡窗口。

使用Jquerys事件机制，以便能够注册多个此类听众或编码您自己的解决方案

，如果您只在同一页面上彼此将2个表格彼此放置，则问题也可能存在 ->在卸载之前只能正确处理第二个表单。