UIBootstrap breaking angularjs post request

Question

I have the following in an angular partial

<h1>{{tournament.name}}</h1>
<accordion close-others="true">
    <accordion-group>
        <accordion-heading>
            <p>Schools</p>
        </accordion-heading>
        <input ng-model="newSchoolName" placeholder="new school name">
        <button class="btn-sm" ng-click="addNewSchool()" ng-disabled="!newSchoolName">Add New School</button><br/>
...

and the following in my controller

tournamentControllers.controller("ConsoleController",['$scope','$http', function($scope, $http){

$scope.update = function(){
    console.log("update");
    $http({method:'GET', url: '/tournament/console_api'}).
        success(function(data,status,headers,config){
            $scope.tournament = data;
        }).error(function(data,status,headers,config){
            console.log("error");
    });//Initial schools
};
$scope.update();
$scope.addNewSchool = function(){
    $http.post('/tournament/add_school',{
        new_name : $scope.newSchoolName
    }).success(function(data,status,headers,config){
        $scope.tournament = data;
    }).error(function(data,status,headers,config){
        console.log("error");
    });
};

If I comment out the ui.bootstrap parts (but don't remove them) it works perfectly, but if I leave them in it ends up sending the empty JSON object "tournament" ={} which I'm guessing comes from the line where I say "$scope.tournament = data;",

I'm using angular 1.2.9, angular route, angular sanitize ui.bootstrap 0.11.0 and bootstrap.css. Thanks in advance.

EDIT: Here are the results of the post request as given by the rails console logs

Parameters: {"tournament"=>{}} when not working

Parameters: {"new_name"=>"gwgfwf", "tournament"=>{}} when working

After trying a lot of debugging, it has to do with a child scope being created inside the accordion and that not including the newSchoolName. No clue how to fix that though.

You're saying your `POST` request is broken. Could you be more specific ? Your code only shows that you'll be posting `{new_name: $scope.newSchoolName}`, not `tournament = {}` which is part of your success callback. Could you provide a screenshot of your console when you press the button to add a school ? — Goodzilla, Sep 11 '14 at 14:38
I added what the rails console shows me and what I think the issue is — Simon Means, Sep 11 '14 at 14:41

score 1 · Accepted Answer · edited May 23 '17 at 12:29

You were right about the child scope.

From this question : "You need to use an object instead of a primitive"

<input ng-model="school.newSchoolName" placeholder="new school name">
<button class="btn-sm" ng-click="addNewSchool()" ng-disabled="!school.newSchoolName">Add New School</button><br/>

and :

$http.post('/tournament/add_school',{
    new_name : $scope.school.newSchoolName
}

Dont forget to declare $scope.school :

$scope.school = {newSchoolName: ''};

I still don't get why you are sending tournament => {} though.

UIBootstrap breaking angularjs post request

1 Answers1