javascript - UI Bootstrap 破坏 angularjs post 请求

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

我在 Angular 部分中有以下内容

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

以及我的 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");
    });
};

如果我注释掉 ui.bootstrap 部分(但不要删除它们),它会完美地工作,但如果我将它们保留在其中,最终会发送空的 JSON 对象“tournament”={},我猜它会出现从我说“$scope.tournament = data;”的那一行开始,

我正在使用 Angular 1.2.9、Angular Route、Angular Sanitize ui.bootstrap 0.11.0 和 bootstrap.css。提前致谢。

编辑:以下是 Rails 控制台日志给出的发布请求的结果

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

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

在尝试了大量调试之后,它与在 Accordion 内部创建的子作用域有关,并且不包括 newSchoolName。但不知道如何解决这个问题。

最佳答案

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

来自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 => {}

关于javascript - UI Bootstrap 破坏 angularjs post 请求,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25789458/

相关文章:

javascript - 如何将变量传递给 javascript 中的样式属性?

ruby-on-rails - Ruby on Rails - 设计 - 查看当前登录的用户

javascript - 如何在 Rails 3.1.4 中使用 FormBuilder.new 构建表单生成器对象

javascript - AngularJS 在实时更新中将模型传递给 Controller

javascript - 管道功能

Javascript - 如何返回数组中最大的四个数字?

javascript - 未捕获的 TypeError : $. get(...).then 不是函数

javascript - Ruby On Rails 应用程序与有关 AJAX 的 angularJS

javascript - Electron 应用程序中的构建问题

ruby-on-rails - Rails 应用程序内部的简单任务调度