1

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

<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');
};

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

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

我已经使用 angular 很长时间了，但我从来没有遇到过这种行为。这是什么原因造成的？

编辑： 这是我的指令的声明方式。

.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');
            }
        });
    }
});

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

我希望能够在模态中使用我的表单，所以任何建议都将不胜感激。

我的模态指令也与我的表单指令位于不同的模块中，如果这有什么不同的话。

4

0 回答 0