AngularJS:ng-submit无效

时间:2015-12-11 21:12:29

标签: angularjs

我的addAct()功能之前工作正常,直到我尝试重构索引表。现在它没有响应。例如,控制台中没有任何内容出现。也许有人可以帮我弄清楚发生了什么。我使用_form.html partial两次,但看看id="newAct"

作用/模板/ index.html中

<div class="actions_body">
  <div class="container">
    <h2>Listing Actions</h2>

    <div class="body">
      <table class>
        <thead>
          <tr class="row">
            <th class="col-md-2 active">
              <label>Name</label>
            </th>
            <th class="col-md-5">Description</th>
            <th class="col-md-2">Inspires</th>
            <th colspan="2" class="col-md-2">Modify</th>
          </tr>
        </thead>
        <tbody ng-repeat="act in acts">
          <tr class="row">
            <td class="col-md-2"><a href="" ng-click="linkToShowAct(act)">{{act.name}}</a></td>
            <td class="col-md-5">{{act.description}}</td>
            <td class="col-md-2">{{act.inspires}}</td>
            <td class="col-md-1"><button ng-click="updateActShow=true">Edit</button></td>
            <td class="col-md-1"><button ng-click="deleteAct(act)">Delete</button>

          <tr ng-show="updateActShow" ng-include="'acts/templates/_form.html'"></tr>
        </tbody>

        <tbody>
          <tr class="row">
            <button ng-click="newActShow=true">New Action</button>
            <button ng-click="newActShow=false">Hide</button>
          </tr>
          <tr ng-show="newActShow" id="newAct" ng-include="'acts/templates/_form.html'"></tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

行为/模板/ _form.html

<div class="row" ng-controller="ActsController">
  <form ng-submit="addAct()">
    <td class="col-md-2">
      <label for="newActName">Name</label>
      <input type="text" ng-model="newAct.name" id="newActName" placeholder="Name" class="form-control">
    </td>
    <td class="col-md-4">
      <label for="newActDescription">Description</label>
      <input type="textarea" ng-model="newAct.description" id="newActDescription" placeholder="Description" class="form-control">
    </td>
    <td class="col-md-2">
      <label for="newActInspires">Inspires</label>
      <input type="number" ng-model="newAct.inspires" id="newActInspires" placeholder="Inspires" class="form-control">
    </td>
    <td class="col-md-2">
      <input type="submit" value="+" class="btn btn-success">
    </td>
  </form>
</div>

作用/控制器/ ActsController.js

controllers = angular.module('controllers');

controllers.controller('ActsController', [
    '$scope', 
    '$routeParams', 
    '$location', 
    '$resource', 
    function($scope,$routeParams,$location,$resource) {

        var Act = $resource('/acts/:actId', {
            actId: "@id",
            format: 'json'
        },  {
            'create': {
                method: 'POST'
            }
        });

        $scope.acts = Act.query();

        $scope.addAct = function() {
            act = Act.save($scope.newAct, function() {
                $scope.acts.push(act);
                $scope.newAct = '';
            });
        }

        $scope.deleteAct = function(act) {
            act.$delete();
            $scope.acts.splice($scope.acts.indexOf(act), 1);
        }

        $scope.linkToShowAct = function(act) {
            return $location.path('/acts/' + act.id);
        } 
}]);

1 个答案:

答案 0 :(得分:0)

您的表位于ActsController范围之外。您需要将ng-controller="ActsController"放在表格周围的其中一个元素上。