問題在角度呈現視圖

我想我想要做的事情非常簡單，但不知何故，我無法使其工作。我確信必須有一些簡單的解決方案，但我找不到它。問題在角度呈現視圖

基本上，我有一個包含我試圖呈現的資源的簡單字典數組（在acts控制器中定義爲$ scope.acts）。我沒有導入JSON或類似的東西，它只是在控制器文件中。該索引工作正常，但我試圖呈現'顯示'視圖（不知道這是否是適當的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>

來源

2015-12-07 Sam Phillips

你可以分享你的HTML？ – Harbinger

在$ scope.linkToShowAct（）我不認爲$返回是正確的，可能會引發一些錯誤。你有沒有檢查控制檯？ –

我添加了html。 –

你ActsController創建一個名爲行爲的數組，但你的html沒有t引用該數組中的項目。它使用行爲而不是行爲[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-07 20:03:17 Ben

問題在角度呈現視圖

回答

相關問題