Question

我有一个使用Angular和ngResource的Rails应用程序来显示我的＆＃34; Order＆＃34;的内容。模型。在应用程序的Angular部分，我可以添加和删除对象，它工作正常。只有当我通过我的网站（使用turbolinks）导航到页面时，＆＃34; addOrder（）＆＃34;功能不起作用。但是，deleteOrder（）函数和所有其他函数都可以工作。我查看了几个console.log和测试函数的情况，发现只有ng-submit似乎没有触发该函数。

这是我的代码的基本部分：

app.js

var app = angular.module('shop', ['ngResource']);

$(document).on('ready page:load', function() {
  angular.bootstrap(document.body, ['shop'])
});

app.factory('models', ['$resource', function($resource){
  ...
}]);

app.controller('OrdersCtrl', ['$scope', 'models', function($scope, models){

  ...

  $scope.addOrder = function(){
    // doesn't work
    ...
  };

  $scope.deleteOrder = function(order){
    // works
    ...
  };

}])

index.html.erb

...

<form ng-submit="addOrder()">
  <tr>
  <td>
    <input type="number" step="0.01" ng-model="newOrder.total" class="form-control">
  </td>
  <td>
    <select ng-model="newOrder.product_id" class="form-control">
      <option ng-repeat="product in products" value="{{product.id}}">{{product.name}}</option>
    </select>
  <?td>
  <td>
    <input type="submit" value="+" class="btn btn-success">
  </td>
  </tr>
</form>

...

<tr ng-repeat="order in orders | orderBy:'-id':reverse">
  {{order.id}}
  <button ng-click="deleteOrder(order)" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
</tr>

...

最让我感到困惑的事实是，似乎只有ng-submit不起作用 - 但其余的都是如此。

编辑：解决方案

所以我做了一些研究，最后发现问题与turbolinks，Angular或Rails无关。问题是，我在表格中没有表格。这导致DOM在开始标记之后生成form结束标记，其中没有任何输入。

Answer 1

我会尝试定义类似page:change的内容，因为我猜这是turbolinks无效的唯一部分。

$(document).on('ready page:load page:change', function() {});

这是我对此的第一次猜测

Answer 2

我自己找到了解决方案。

所以我做了一些研究，最后发现问题与turbolinks，Angular或Rails无关。问题是，我在表格中没有表格。这导致DOM在开始标记之后生成form结束标记，其中没有任何输入。

所以这段代码：

<form ng-submit="addOrder()">
  <tr>
  <td>
    <input type="number" step="0.01" ng-model="newOrder.total" class="form-control">
  </td>
  <td>
    <select ng-model="newOrder.product_id" class="form-control">
      <option ng-repeat="product in products" value="{{product.id}}">{{product.name}}</option>
    </select>
  <?td>
  <td>
    <input type="submit" value="+" class="btn btn-success">
  </td>
  </tr>
</form>

在DOM中看起来像这样：

<form ng-submit="addOrder()"></form>
<tr>
  <td>
    <input type="number" step="0.01" ng-model="newOrder.total" class="form-control">
  </td>
  <td>
    <select ng-model="newOrder.product_id" class="form-control">
      <option ng-repeat="product in products" value="{{product.id}}">{{product.name}}</option>
    </select>
  <?td>
  <td>
    <input type="submit" value="+" class="btn btn-success">
  </td>
</tr>

ng-submit不会使用turbolinks

2 个答案: