Question

我的角度应用程序（在SharePoint中）有一个表单，它使用hashbang进行路由，但是当我单击表单中的按钮时，它会重定向到根目录（就像它无法解析URL所以它使用了否则在我的配置中设置），而不是执行该功能。

这是HTML（我的控制器在路由中定义）：

<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（My Angular Form在SharePoint中）有关，因为即使将按钮类型设置为按如下方式提交也会触发刷新而不是运行该功能。 SharePoint正在将所有内容包装在表单中，因为它从Web的主页面继承，因此当我向页面添加两个“Angular Forms”时，第一个角形表单是关闭SharePoint表单上的标记，以便第二个能够工作。有没有人有一个稳定的解决方法（除了创建自定义母版页）。图片如下：

SharePoint App HTML

Answer 1

添加type =＆＃39;按钮＆＃39;按钮。之前我遇到过同样的问题，并认为它是某种角度的错误。

Answer 2

我通过关闭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>

Answer 3

这两个按钮是出现此行为还是仅显示“提交”按钮？

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

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

3 个答案: