ng-submit 不适用于 turbolinks

Question

我有一个 Rails 应用程序，它使用 Angular 和 ngResource 来显示我的 "Order" 模型的内容。在应用程序的 Angular 部分，我可以添加和删除对象，而且效果很好。仅当我通过我的网站（使用 turbolinks）导航到该页面时，"addOrder()" 功能才会起作用。不过，deleteOrder() 函数和所有其他函数都有效。我检查了几个 console.logs 和测试函数的情况，发现只有 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 无关。问题是，我无法在 inside a table 中创建表格。这导致 DOM 在开始标签之后生成一个 form 结束标签，其中包含 none 输入。

Answer 1

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

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

这只是我的第一个猜测

Answer 2

我自己找到了解决方案。

所以我做了更多的研究，最终发现问题与 turbolinks、Angular 或 Rails 无关。问题是，我无法在 inside a table 中创建表格。这导致 DOM 在开始标签之后生成一个 form 结束标签，其中包含 none 个输入。

所以这段代码：

<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

ng-submit won't work with turbolinks

ruby-on-rails

angularjs

turbolinks

ngresource