使用 angular 提交按钮导致重定向而不是调用 SharePoint 中的函数

Question

我的 angular 应用程序（在 SharePoint 中）中有一个表单通过 hashbang 使用路由，但是当我单击表单中的按钮时，它会重定向到根目录（好像它无法解析URL 所以它使用我的配置中的其他设置），而不是执行函数。

这里是HTML（我的controller是在路由中定义的）：

<form name="newItem" class="form-horizontal" data-ng-submit="createItem()">
            <fieldset>
                <div class="form-group">
                    <label class="col-lg-2 control-label" for="itemtype">Type *</label>
                    <div class="col-lg-10">
                        <select class="form-control" id="itemtype" data-ng-model="selectedType"
                                data-ng-options="opt as opt.label for opt in types" required>
                            <option style="display:none" value="">Select a type</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-2 control-label" for="title">Title *</label>
                    <div class="col-lg-10">
                        <input class="form-control" name="title" id="title" type="text" data-ng-model="itemtitle" placeholder="Add your title (Limited to 70 characters)" data-ng-maxlength="70" required>
                        ({{70 - newItem.title.$viewValue.length}} Characters Remaining)
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-lg-2 control-label" for="body">Body *</label>
                    <div class="col-lg-10">
                        <textarea class="form-control" name="body" id="body" data-ng-model="itembody" rows="4" placeholder="Add your body (Limited to 500 characters)" data-ng-maxlength="500" required> </textarea>
                        Your summary will be displayed as follows ({{500 - newItem.body.$viewValue.length}} Characters Remaining):<br /> {{itembody}}

                    </div>
                </div>
                <div class="form-group">
                    <div class="col-lg-10 col-lg-offset-2">
                        <button class="btn btn-default" data-ng-click="cancel()">Cancel</button>
                        <button class="btn btn-primary" data-ng-click="newItem">Submit</button>
                    </div>
                </div>
            </fieldset>
        </form>

这是我的控制器：

appControllers.controller('appItemPostCtrl', ['$scope', '$location', 'appItems', 'appTypes', function ($scope, $location, appItems, appTypes) {

var itemEntry = new appItems;
console.log(itemEntry);

 $scope.types = [];

 appTypes.query(function (typedata) {
     var itemTypes = typedata.value; 
    // Foreach type, push values into types array
    angular.forEach(itemTypes, function (typevalue, typekey) {

        $scope.types.push({
            label: typevalue.Title,
            value: typevalue.Title,
        });
    })
});


$scope.createItem = function () {

    itemEntry.Title = $scope.itemtitle;
    itemEntry.$save();

}

$scope.cancel = function () {

}

}]);

更新： 看来这与 SharePoint 有关（我的 Angular 表单在 SharePoint 中），因为即使设置按钮类型提交如下也会触发刷新而不是运行函数。 SharePoint 将所有内容包装在一个表单中，因为它继承自 Web 的母版页，所以当我向页面添加两个 "Angular Forms" 时，第一个 angular 表单关闭了 SharePoint 表单上的标记，因此二是能够工作。有没有人有稳定的解决方法（除了创建自定义母版页）。图片如下：

Answer 1

将 type='button' 添加到按钮。我以前遇到过同样的问题，并认为这是某种 angular 错误。

Answer 2

是两个按钮都表现出这种行为还是只有“提交”按钮表现出这种行为？

提交按钮从ng-click中调用了newItem，但是js中的函数名实际上是createItem。

Answer 3

我通过关闭 SharePoint 标签而不是创建自定义母版页解决了这个问题。例如：

<!-- Close the default form tag put in place by SharePoint instead of creating a custom Masterpage without this element that requires increased permissions and complexity to deploy. Without this tag closed, the form below will not render properly -->
</form>

<div>

<form id="newItemForm" class="form-horizontal" data-ng-submit="createItem()">
    <div class="form-group">
        <label class="col-lg-2 control-label" for="itemtype">Type *</label>
        <div class="col-lg-10">
            <select class="form-control" id="itemtype" data-ng-model="selectedType"
                    data-ng-options="opt as opt.label for opt in types" required>
                <option style="display:none" value="">Select a type</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-lg-2 control-label" for="title">Title *</label>
        <div class="col-lg-10">
            <input class="form-control" name="title" id="title" type="text" data-ng-model="itemtitle" placeholder="Add your title (Limited to 70 characters)" data-ng-maxlength="70" required>

        </div>
    </div>

    <div class="form-group">
        <label class="col-lg-2 control-label" for="body">Body *</label>
        <div class="col-lg-10">
            <textarea class="form-control" name="body" id="body" data-ng-model="itembody" rows="4" placeholder="Add your body (Limited to 500 characters)" data-ng-maxlength="500" required> </textarea>
        </div>
    </div>

    <div class="col-lg-10 col-lg-offset-2">
        <!--<button type="button" class="btn btn-default" data-ng-click="cancel()">Cancel</button>-->
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>

</div>

使用 angular 提交按钮导致重定向而不是调用 SharePoint 中的函数

Using angular submit button causes redirect instead of calling function in SharePoint

sharepoint

angularjs

sharepoint-2013