0

私がやろうとしていることは非常に単純だと思いますが、どういうわけかそれを機能させるのに苦労しています。簡単な解決策があるに違いないと確信していますが、それを見つけることができません。

基本的に、レンダリングしようとしているリソースを含む辞書の単純な配列があります (acts コントローラーで $scope.acts として定義されています)。私はJSONなどをインポートしていません。コントローラーファイルにすべてあります。インデックスは正常に機能していますが、「表示」ビューをレンダリングしようとしています (これが適切な Angular 用語であるかどうかはわかりません。Rails での作業に慣れているので、まだそれらの用語で考えています)。配列内のアイテムであり、機能していません。テンプレートはロードされていますが、配列からデータを取得していません。

私は本当にこれを可能な限りシンプルな方法でやりたいと思っています。余計なものはありません。最終的には、Rails アプリからデータをロードしたいと考えていますが、これを 1 ステップずつ構築して、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);
    }
}]);

templates/acts/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 は act という名前の配列を作成しますが、html はその配列内の項目を参照していません。act[0] の代わりに act を使用しています。

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 に答える