0

我认为我正在尝试做的事情非常简单，但不知何故我无法让它发挥作用。我确定必须有一些简单的解决方案，但我找不到。

基本上，我有一个简单的字典数组，其中包含我要渲染的资源（在行为控制器中定义为 $scope.acts）。我没有导入 JSON 或类似的东西，它就在控制器文件中。索引工作正常，但我正在尝试渲染一个“显示”视图（不确定这是否是正确的 Angular 术语，我习惯使用 Rails，所以我仍然认为这些术语），对于单个数组中的项目，它不工作。模板正在加载，但它没有从数组中获取数据。

我真的想以最简单的方式做到这一点，没有花里胡哨的东西。最终，我想从 Rails 应用程序加载数据，但我想一步一步地构建它，以便我了解 Angular 是如何做到这一点的。

这是我的代码。

应用程序.js

var controllers, snowball_effect;

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

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


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

controllers.controller("StaticPagesController", ['$scope', {}]);

controllers.controller("NavBarController", [
  '$scope', 
  '$routeParams', 
  '$location',
  function($scope,$routeParams,$location) {
    $scope.actsIndex = function() {
      $location.path("/acts/index");
    }
    $scope.actsNew = function () {
      $location.path("/acts/index");
    }

}]);

ActsController.js

controllers = angular.module('controllers');

controllers.controller("ActsController", [
  '$scope', 
  '$routeParams', 
  '$location', 
  '$resource', 
  function($scope,$routeParams,$location,$resource) {
    $scope.acts = [
      {
        id: 1, 
        name: "Plant a Flower", 
        description: "Plant a flower in your garden or along the street.",
        inspires: 1
      }
    ];

    $scope.addAct = function() {
      $scope.acts.push($scope.newAct);
    }

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

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

模板/行为/show.html

<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>
4

1 回答 1

1

您的 ActsController 创建了一个名为acts 的数组，但您的 html 没有引用该数组中的项目。它使用行为而不是行为[0]。

尝试将您的 html 更改为：

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

    <h1>
        {{acts[0].name}}
    </h1>

    <p class="act-show-description">
        {{acts[0].description}}
    </p>

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

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

于 2015-12-07T20:03:17.557 回答