Question

我怀疑我想要做的事情非常简单，我是Angular的新手，所以有些明显的做法有点过头了。我无法访问节目视图（对不起，我来自Rails的角色，所以我仍然用这些术语来思考）我的Acts资源。视图呈现正常，但它不显示我想要的数据。我怀疑模板没有收到我在控制器中定义的$ scope.act变量。当我在控制器中使用console.log时，我可以看到该变量包含我想要使用的所有数据。我假设我必须做一些事情将变量作为参数传递给模板，但我不确定我是怎么做的。

这是我的代码：

app.js

$(document).on('page:load', function() {
    return $('[ng-app]').each(function() {
        var module;
        module = $(this).attr('ng-app');
        return angular.bootstrap(this, [module]);
    });
});

var snowball_effect = angular.module('snowball_effect', [
    'templates', 
    'ngRoute', 
    'ngResource',
    'controllers'
]);

snowball_effect.config([
    '$routeProvider', function($routeProvider) {
        return $routeProvider
        .when('/', {
            templateUrl: "static_pages/templates/index.html",
            controller: 'StaticPagesController'
        })
        .when('/acts/index', {
            templateUrl: "acts/templates/index.html",
            controller: 'ActsController'
        })
        .when('/acts/:id', {
            templateUrl: "acts/templates/show.html",
            controller: 'ActsController'
        });
    }
]);

var controllers = angular.module('controllers', []);

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(act);
            $scope.acts.splice($scope.acts.indexOf(act), 1);
        }

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

show.html

<div class="acts-show">
    <div class="container" ng-controller="ActsController">
        <div class="body">

            <h1>
                {{act.name}}
            </h1>

            <p class="act-show-description">
                {{act.description}}
            </p>

            <p class="act-show-inspires">
                <strong>Inspires:</strong>
                {{act.inspires}}
            </p>

            <a href="#/">Edit</a>
            <a href="#/">Back</a>
        </div>
    </div>
</div>

的index.html

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

    <div ng-controller="ActsController" class="body">
      <table class="row">
        <thead>
          <tr>
            <th class="col-md-2 col-md-offset-1 active">
              <label>Name</label>
            </th>
            <th class="col-md-4">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">
          <td class="col-md-offset-1 col-md-2"><a href="" ng-click="linkToShowAct(act)">{{act.name}}</a></td>
          <td class="col-md-4">{{act.description}}</td>
          <td class="col-md-2">{{act.inspires}}</td>
          <td><a href="#">Edit</a></td>
          <td><button ng-click="deleteAct(act)">Delete</a></button>
        </tbody>
      </table>

      <br>

      <button ng-click="newActShow=true">New Action</button>
      <button ng-click="newActShow=false">Hide</button>

      <div ng-show="newActShow" id="newAct">
        <div class="row">
          <form class="form-inline" ng-submit="addAct()">
            <div class="col-md-3 form-group">
              <label for="newActname">Name</label>
              <input type="text" ng-model="newAct.name" id="newActname" placeholder="Name" class="form-control col-md-2">
            </div>
            <div class="col-md-3 form-group">
              <label for="newActdescription">Description</label>
              <input type="textarea" ng-model="newAct.description" id="newActdescription" placeholder="Description" class="form-control col-md-2">
            </div>
            <div class="col-md-3 form-group">
              <label for="newActinspires">Inspires</label>
              <input type="number" ng-model="newAct.inspires" id="newActinspires" placeholder="Inspires" class="form-control col-md-2">
            </div>
            <div class="col-md-3 form-group">
              <input type="submit" value="+" class="btn btn-success">
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

尝试$locationChangeStart以确保在状态实际更改并且路由发生之前将值设置为范围变量，即使在设置变量之前放置$location.path('acts/' + act.id);，也没有保证在状态改变之前设置该值（实际路由）。我更喜欢（更安全的值设置方法）使用promise例如..

AngularJS：将参数传递给$ location.path

1 个答案: