Question

我的角色应用程序中有以下表格

<div id="edit-customer-form">
    <form data-ng-submit="formCtrl.submit()">
        <label data-ng-click="formCtrl.out()">Name
            <input type="text" data-ng-model="formCtrl.customer.name"/>
        </label>
        <label>Consignee
            <input type="text" data-ng-model="formCtrl.customer.consignee"/>
        </label>
        <label>Invoice To
            <input type="text" data-ng-model="formCtrl.customer.invoice_to"/>
        </label>
        <label>Notify Party
            <input type="text" data-ng-model="formCtrl.customer.notify_party"/>
        </label>
        <label>Point of Sale
            <input type="text" data-ng-model="formCtrl.customer.point_of_sale"/>
        </label>
        <label>Country
            <select data-ng-model="formCtrl.selectedCountry"
                    data-ng-options="country.Country.name for country in formCtrl.countries"></select>
        </label>
        <label>Port
            <select data-ng-model="formCtrl.customer.port_id"
                    data-ng-options="port.id as port.name for port in formCtrl.ports"></select>
        </label>

        <button type="submit">Save</button>
        <button type="button" data-ng-click="formCtrl.cancel()">Cancel</button>
    </form>
</div>

此元素是指令editCustomerForm的模板。

该指令很长，所以除非需要，否则我不会在这里发布整个内容，但函数submit()目前只生成一个控制台日志。

form.submit = function () {
    console.log('submitting');
};

提交表单后，网址website.com/#/customers变为website.com/?#/customers。这会导致整页刷新。

将?添加到网址后，一切都按预期工作，直到点击链接，再次刷新页面并重置网址。

我已经和角度工作了很长时间了，我从来没有遇到过这种行为。造成这种情况的原因是什么？

修改这是我的指令声明的方式。

.directive('editCustomerForm', [
            'customerService', 'countryService', 'portService', 'errorService',
            function (customerService, countryService, portService, errorService) {
                return {
                    restrict: 'E',
                    scope: {
                        pushTo: '&',
                        customer: '&'
                    },
                    templateUrl: '/partials/elements/customers/forms/edit.html',
                    controller: function ($scope) {
                        var form = this;
                        form.pushTo = $scope.pushTo;
                        form.countries = [];
                        form.ports = [];
                        form.selectedCountry = {};
                        form.selectedPort = {};

                        var clone = function (obj) {
                            return $.extend(true, {}, obj);
                        };

                        form.customer = clone($scope.customer());

                        ...

                        form.submit = function () {
                            console.log('submitting');
                            //customerService.edit(form.customer, successfulEdit(form.customer), handleError)
                        };

                        form.cancel = function () {
                            form.customer = {};
                            form.selectedCountry = {};
                            form.selectedPort = {};
                            form.pushTo().cancelEditCustomer();
                        };

                    },
                    controllerAs: 'formCtrl'
                };
            }]);

更新

所以问题似乎就在这里

<div id="edit-customer-modal" class="reveal-modal" data-reveal-modal="{{customers.modalOn ? 'show-modal' : 'hide-modal'}}" data-reveal>
    <edit-customer-form push-to="customers" customer="customers.getSelectedEditCustomer()"></edit-customer-form>
</div>

我在基础5模态中使用我的形式。我为模态做了一个指令reveal-modal。

这是模态指令代码

app.directive('revealModal', function () {
    return function (scope, elem, attrs) {
        scope.$watch(function(){return attrs.revealModal}, function (val) {
            if (val === 'show-modal') {
                elem.foundation('reveal', 'open');
            } else {
                elem.foundation('reveal', 'close');
            }
        });
    }
});

当表单不在此块内时，它会正确执行。

我希望能够在模态中使用我的表单，所以任何建议都会受到赞赏。

我的模态指令也与我的表单指令不同，如果这有任何区别的话。

angularjs表单提交导致页面重新加载并添加＆＃39;？＆＃39;到网址

0 个答案: