Question

我有一个问题需要处理通过ajax调用获取html。它获取添加表单的模板;但我无法通过ajax调用找到从html中获取的表单。那么，我如何使用angularJS提交表单？请帮帮我！

<div class="alive" ng-controller="ListController">
    <div ng-include="templateForList"></div>
</div>
<div class="alive" ng-controller="AddController">
    <div ng-include="templateForAddition"></div>
</div>

<script type="text/javascript" src="/vendor/angular/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('myApp', []).config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
    }]);

    app.service('StoreService', ['$http', function ($http) {
        return {
            getAll: function () {
                return $http.get('/admin/shopping/stores/list');
            }
        };
    }]);

    app.factory('myCustomService', function($rootScope) {
        var sharedService = {};
        sharedService.broadcastEvent = function(eventName) {
            $rootScope.$broadcast(eventName);
        };

        return sharedService;
    });

    app.controller('ListController', ['$scope', 'StoreService', 'myCustomService', function($scope, StoreService, sharedService) {
        $scope.stores = {};
        $scope.templateForList = '/views/stores/list.tpl.html';
        StoreService.getAll().success(function(response) {
            $scope.stores = response.data;
        });

        $scope.showAddForm = function(store, storeEntryForm) {
            sharedService.broadcastEvent('displayAddForm');
        };
    }]);

    app.controller('AddController', ['$scope', function($scope) {
        $scope.templateForAddition = '/views/stores/add.tpl.html';
        $scope.$on('displayAddForm', function() {
            angular.forEach(document.getElementsByClassName('skate-item'), function(item) {
                var $item = angular.element(item), s = $item.scope();
                if ($scope.$id == $item.scope().$id) {
                    $item.addClass('alive');
                } else {
                    $item.removeClass('alive');
                }
            });
        });

        $scope.create = function(store) {
            console.log('submitting', $scope.storeEntryForm, $scope.store);
        };
    }]);
</script>

add.html是：

<form method="post" name="storeEntryForm" class="form-horizontal" data-ng-submit="create(store)" novalidate>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="box box-success">
            <div class="box-header"><h3 class="box-title">Create Store</h3></div><!-- /.box-header -->
            <div class="box-body clearfix">
                <div class="col-xs-12 col-sm-12 col-md-5">
                    <div class="form-group">
                        <label class="control-label">Name</label>
                        <input type="text" placeholder="Enter name of the store" class="form-control" ng-model="store.name" name="name" required ng-maxlength="50" />
                    </div>
                    <div class="form-group">
                        <label class="control-label">Address</label>
                        <textarea placeholder="Enter address" class="form-control" ng-model="store.address" name="address" ng-maxlength="100"></textarea>
                    </div>
                    <div class="form-group">
                        <label class="control-label">ISO No.</label>
                        <input type="text" class="form-control" ng-model="store.iso_no" name="iso_no" ng-maxlength="50" />
                    </div>
                </div>
            </div><!-- /.box-body -->
            <div class="box-footer text-center">
                <button type="submit" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-default" data-ng-click="cancel()">Cancel</button>
            </div>
        </div><!-- /.box -->
    </div><!-- /.bs3-col-lg-8 -->
</form>

Answer 1

您可以从https://stackoverflow.com/a/23701325找到解决方案。非常相似的问题，我想这是合理的。如需进一步研究，您可以阅读Why form undefined inside ng-include when checking $pristine or $setDirty()?中的Javascript原型链接。希望这会奏效。

由于

Answer 2

我刚写了一段代码。你需要使用from tag和ng-submit指令来表示html。 ng-submit将调用函数发布数据。

请检查我的jsFiddle：http://jsfiddle.net/v9djntf2/

<form ng-submit="sendPost()">
    <input ng-model="NewPerson.Name"/>
    <button type="submit">Send</button>
</form>

Angularjs：找不到从服务器通过ajax调用获取的表单

2 个答案: