ng-submit from bootstrap popover

时间:2014-02-09 09:04:48

标签: angularjs twitter-bootstrap twitter-bootstrap-3

以下jade模板在弹出窗口中显示登录表单(loginForm)。相反,在路径中呈现为视图的一部分时,相同的表单标记可以正常工作,但是当按照下面的编码放入弹出窗口时,ng-submit不起作用。提交表格会在当前位置提交GET提交。

doctype html
html(lang='en', data-ng-app='angular-client-side-auth')
    head
        meta(charset='utf-8')
        title Whatever

        //- CSS
        link(rel='stylesheet', href='/css/app.css')
        link(href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css", rel="stylesheet")
        link(href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css", rel="stylesheet")

        //- This is needed because Facebook login redirects add #_=_ at the end of the URL
        script(type="text/javascript").
            if (window.location.href.indexOf('#_=_') > 0) {
                window.location = window.location.href.replace(/#.*/, '');
            }

    body(data-ng-cloak)

        .container
            .container.navbar.navbar-inverse.navbar-fixed-top(data-ng-controller="NavCtrl")
                ul.navbar-nav.nav(data-access-level='accessLevels.anon', active-nav)
                    li: a.navbar-brand(href="/") Whatever
                ul.navbar-nav.nav.pull-right(data-access-level='accessLevels.anon', active-nav)
                    li: a(href="#" id="loginLink") Log In

                ul.navbar-nav.nav(data-access-level='accessLevels.user', active-nav)
                    li: a.navbar-brand(href="/home") Quiver
                ul.navbar-nav.nav.pull-right(data-access-level='accessLevels.user', active-nav)
                    li.dropdown
                        a.dropdown-toggle(href="#", data-toggle="dropdown")
                            |{{user.username}} <b class="caret"></b>
                        ul.dropdown-menu
                            li: a(href="/u/{{user.username}}") Your Profile
                            li: a(data-ng-click="logout()") Log Out

            .alert.alert-danger(id='error', data-ng-bind="error", data-ng-show="error")

            div.content(id='content', data-ng-view='ng-view')

        #login.hide
            form.form-horizontal(ng-controller="LoginCtrl", ng-submit="login()", id="loginForm", name="loginForm", role="form", autocomplete="off")
                input(type="hidden", data-ng-model="foo", value="bar")
                .form-group
                    input.form-control(type="text", data-ng-model="username", placeholder="Username", name="username", required, autofocus)
                .form-group
                    input.form-control(type="password", data-ng-model="password", placeholder="Password", name="password", required)
                .form-group
                    input(type="checkbox", data-ng-model="rememberme", name="rememberme")
                    | &nbsp;Remember me
                .form-group
                    button.btn.btn-default(type="submit") Log in

        //- JavaScript
        script(src='//code.jquery.com/jquery-1.10.1.min.js')
        script(src='//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js')
        script(src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js')
        script(src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-cookies.min.js')
        script(src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js')
        script(src='//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js')
        script(src='/js/routingConfig.js')
        script(src='/js/app.js')
        script(src='/js/services.js')
        script(src='/js/controllers.js')
        script(src='/js/filters.js')
        script(src='/js/directives.js')

        script(type="text/javascript").
            $(document).ready(function() {
                $('#loginLink').popover({
                    placement:'bottom',
                    template: '<div class="popover" style="margin-left:-70px; margin-top:-5px;"><div class="arrow" style="margin-left:60px"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
                    html : true, 
                    content: function() {
                      return $('#login').html();
                    }
                });
            });


        //- Partial views... Load up front to make transitions smoother
        script(type="text/ng-template", id="404")
            include partials/404
        script(type="text/ng-template", id="index")
            include partials/index
        script(type="text/ng-template", id="login")
            include partials/login  

我假设表格超出了范围。可以做些什么?

0 个答案:

没有答案