Question

我的TAB结构如下：

每个标签都有单独的格式，我使用了有角度的路线导航到标签：

喜欢：

onboardingApp.config(['$routeProvider', '$httpProvider', function ($routeProvider, $httpProvider) {

        $routeProvider.when('/empDetails', {
            templateUrl: 'templates/employeeDetails.html',
            controller: 'empDetailsController',
            activeLink: 'empDetails',
            data: {
                login: false
            }
        });

        $routeProvider.when('/login', {
            templateUrl: 'templates/login.html',
            controller: 'loginController',
            activeLink: 'login',
            data: {
                login: true
            }
        });
        $routeProvider.when('/accType', {
            templateUrl: 'templates/accountType.html',
            controller: 'accountTypeController',
            activeLink: 'accType',
            data: {
                login: false
            }
        });

        $routeProvider.when('/verifyID', {
            templateUrl: 'templates/identityVerification.html',
            controller: 'verifyIdentityController',
            activeLink: 'verifyID',
            data: {
                login: false
            }
        });
        $routeProvider.when('/personalDetails', {
            templateUrl: 'templates/personalDetails.html',
            controller: 'personalDetailsController',
            activeLink: 'personalDetails',
            data: {
                login: false
            }
        });

        $routeProvider.otherwise({
            redirectTo: '/login'
        });

        $httpProvider.interceptors.push('APIInterceptor');

    }]);

我想要做的是，如果帐户创建下的表单无效，并且用户尝试导航到另一个选项卡，然后让我们说个人详细信息，则应该有错误弹出窗口显示数据未在帐户创建中填写。我已准备好弹出窗口的标记，我使用了Angular UI bootstrap中的$ modal。

在Route的Resolve属性中有没有办法做到这一点？

如果用户点击身份验证并且帐户创建下的表单无效，那么我还需要显示错误弹出窗口。

<script type="text/ng-template" id="error.html">
    <form id="form1" name="form1">
    <div class="">
        <div class="modal-header">
            <button type="button" ng-click="cancel()" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
         <div class="modal-body">
                <div class="customOptions topMargin">
                    <span class="error"></span>
                    <p>You have not filled {{tabData}} Data</p>
                </div>
         </div>
    </div>
</form>
</script>

如何实现这一目标？

如果当前表单无效并尝试转到另一个Route中，则显示Error popup in angular JS

0 个答案: