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

问题

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.

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>

Here is my controller:

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 () {

}

}]);

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:

回答1:

Add type='button' to the buttons. I had this same problem before and assumed it was an angular bug of some kind.

回答2:

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>

回答3:

Do both buttons exhibit this behavior or just the Submit button?

The submit button calls newItem from ng-click, but the name of the function in the js is actually createItem.

来源：https://stackoverflow.com/questions/29020390/using-angular-submit-button-causes-redirect-instead-of-calling-function-in-share