通过角度形式发布数据,无需角度重新加载页面

时间:2015-08-04 21:42:14

标签: angularjs

$scope.createPermission= function(form){
    AppFactory.createNewPermission(form)
        .success(function(data) { 

            $scope.updatedPermissions = data;

            $scope.navMode='getPermission'

            var original = $scope.permission;
            $scope.reset(original);
            $scope.permission = {}; // clear the form 
        })
        .error(function(data) {
            console.log('Error in creating permission: ' + data);
        });

    $scope.Execute=function(id) {
        if($scope.navMode=='updatePermission') {
            $scope.editPermission(id);
        } else if($scope.navMode=='createPermission') {
            $scope.createPermission($scope.permission);
        }
    }
}

$scope.reset= function(original) {
    $scope.permission= angular.copy(original)
    $scope.form2.$setPristine(true);
    //$scope.form2.$setUntouched(true);
}

HTML:

<div class="row">
    <div class="container col-sm-6 col-sm-offset-2" 
         ng-show="navMode == 'createPermission' || navMode=='updatePermission' || navMode=='getPermission'">

        <div>
            <h1>Permissions</h1>
        </div>
    </div>
    <form class="form2" ng-show="showHide('Create')" ng-if=""name="form2" ng-submit="Execute(permissionId)" novalidate>

        <div class="form-group" ng-class="{ 'has-success': form2.name.$valid && submitted, 'has-error': form2.name.$invalid && submitted }">
            <label>Permission Name</label>

            <input type="text" name="name" class="form-control" ng-model="permission.name" required/>
            <p class="help-block" ng-show="form2.name.$error.required && submitted">
                A permission name is required
            </p>
        </div>

        <div class="row col-lg-offset-3">
            <button class="btn btn-primary" ng-disabled="form2.$invalid" type="submit">Save</button>
        </div>
    </form>
</div>

我在控制器中有上面的代码,并在提交表单时执行。现在,它在页面重新加载时工作正常但我无法通过表单背靠背添加数据。我需要每次重新加载页面以通过表单发布新数据。

为什么会这样?

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:2)

如果没有看到HTML的这一部分,我猜你会使用<form>的action属性。 AngularJS提供了ng-submit,允许您为submit事件设置处理程序,而不是实际上“传递”传统意义上的表单。请参阅https://docs.angularjs.org/api/ng/directive/ngSubmit