Question

我认为我想要做的事情非常简单，但不知怎的，我无法让它发挥作用。我敢肯定必须有一些简单的解决方案，但我找不到它。

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

我真的想以最简单的方式做到这一点，没有花里胡哨。最后，我想从Rails应用程序加载数据，但是我想一步一步地构建它，这样我就能感受到Angular是如何做到的。

这是我的代码。

app.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>

Answer 1

您的ActsController创建一个名为acts的数组，但您的html不引用该数组中的项。它使用的是act而不是act [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>

在Angular中解决视图问题

1 个答案: