UI Bootstrap 破坏 angularjs 发布请求答案

【问题标题】：UIBootstrap breaking angularjs post requestUI Bootstrap 破坏 angularjs 发布请求
【发布时间】：2014-09-11 14:00:04
【问题描述】：

我在一个角度部分有以下内容

<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/>
...

以及我的控制器中的以下内容

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");
    });
};

如果我注释掉 ui.bootstrap 部分（但不要删除它们），它会完美运行，但如果我将它们留在它最终会发送空的 JSON 对象“锦标赛”={}，我猜这是从我说“$scope.tournament = data;”的那一行开始，

我正在使用 angular 1.2.9、angular route、angular sanitize ui.bootstrap 0.11.0 和 bootstrap.css。提前致谢。

编辑：这是 rails 控制台日志给出的发布请求的结果

参数：{"tournament"=>{}} 不工作时

参数：{"new_name"=>"gwgfwf", "tournament"=>{}} 工作时

在尝试了大量调试之后，这与在手风琴内创建的子范围有关，并且不包括 newSchoolName。不知道如何解决这个问题。

【问题讨论】：

您是说您的POST 请求已损坏。你可以再详细一点吗？您的代码仅显示您将发布{new_name: $scope.newSchoolName}，而不是tournament = {}，这是您成功回调的一部分。当您按下按钮添加学校时，您能否提供控制台的屏幕截图？
我添加了 rails 控制台显示的内容以及我认为的问题

标签： javascript ruby-on-rails angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

您对子范围的看法是正确的。

来自this question：“你需要使用对象而不是原始对象”

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

和：

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

别忘了声明$scope.school：

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

我还是不明白你为什么要发送tournament => {}。

【讨论】：