使用角度提交按钮会导致重定向，而不是在SharePoint中调用函数

问题描述

我的棱角分明的应用程序(在SharePoint中)有一个表单，该表单使用通过hashbang进行路由，但是当我单击表单中的按钮时，它会重定向到根目录(例如无法解析URL，因此它使用否则在我的配置中进行设置)，而不是执行该功能.

I have a form within my angular app (within SharePoint) that uses routing via hashbang, but when I click on a button in my form, it redirects to the root (like it can't resolve the URL so it uses the otherwise setting in my config), instead of executing the function.

这是HTML(我的控制器在路由中定义):

Here is the HTML (my controller is defined in the routing):

<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 Form在SharePoint中)，即使将按钮类型设置为如下提交也将触发刷新，而不是运行该功能.由于SharePoint是从Web的母版页继承而来的，所以它会将所有内容包装在表单中，因此当我向页面添加两个角度表单"时，第一个角度表单关闭了SharePoint表单上的标签，因此第二个可以工作.有没有人有一个稳定的解决方法(除了创建自定义母版页之外).图片如下:

UPDATE: It appears that this is related to SharePoint (My Angular Form is in SharePoint), as even setting the button type to submit as follows triggers the refresh instead of running the function. SharePoint is wrapping everything in a form since it inherits from the Master page of the Web, so when I added two "Angular Forms" to the page, the first angular form was closing the tag on the SharePoint form so the second was able to work. Does anyone have a stable workaround (beyond creating a custom masterpage). Image as follows:

推荐答案

我通过关闭SharePoint标记而不是创建自定义母版页来解决它.例如:

I solved it by closing the tag of SharePoint instead of creating a custom masterpage. Ex:

<!-- 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>

这篇关于使用角度提交按钮会导致重定向，而不是在SharePoint中调用函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！