Angular應用程序的變量將不會顯示在HTML中

我在製作Web應用程序時學習AngularJS。我已經閱讀了教程，並從一個簡單的列表開始。我想不通，爲什麼我的瀏覽器只顯示的{{title}}Angular應用程序的變量將不會顯示在HTML中

這裏是我的app.js模塊，在那裏我定義這個列表中的控制器的一部分：

var myApp = angular.module('myApp', []); 
function TableauListCtrl ($scope, writeList) { 

$scope.titles = [ // assigned test values 
    {item: 'wkbk1 title'}, 
    {item: 'wkbk2 title'}, 
    {item: 'wkbk3 title'}]; 

}

這裏是HTML我試圖訪問的標題數組：

<div id="List of Workbooks" ng-controller="TableauListCtrl" > 
    <ul> 
     <li ng-repeat="title in titles" ng-click="clickWorkbook(title)" ng-mouseover="mouseoverWorkbook(title)"> {{title}} </li> 
    </ul> 
</div>

因此，只顯示：{{title}}而不是數組中的值。

我用ng-app來指定我的角度模塊的名稱，並在html的末尾使用腳本標籤來包含app.js文件等等。任何人都能抓住我的問題嗎任何幫助或見解將不勝感激，謝謝！

[編輯]

好的在撥弄觀察時沒有固定自身。我現在正在嘗試創建一個服務來爲我製作清單。我在語法中丟失了什麼？現在沒有在呈現的HTML中顯示。這裏是模塊，控制器和服務定義，它們全部都在一個文件中。

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

function TableauListCtrl($scope, writeList) { 

    $scope.titles = writeList.readTitles(); 

} 

app.service('writeList', function() { 

this.addTitle = function (title, titles) { 
    titles.push(title); 
}; 
this.readTitles = function() { 
    var titles = []; 
    for (var i = 0; i < 5; i++) { 
     var title = "title " + i; 
     addTitle(title, titles); 
    } 
    return titles; 
}; 
});

來源

2013-07-01 Emma

一把小提琴或撬棍會有所幫助。這裏是一個工作小提琴：http://jsfiddle.net/yvcTA/2/ –

通常當我看到模板未經修改，我有一個JavaScript錯誤的地方是防止角度正確啓動。我想你的情況可能只是一個配置問題。 –

嗯，好吧！我會繼續調整配置。感謝您的建議和小提琴家！ – Emma

您正在使用錯誤的變量。
$scope.titles是對象

[ // assigned test values 
{item: 'wkbk1 title'}, 
{item: 'wkbk2 title'}, 
{item: 'wkbk3 title'}]

所以，你應該綁定title.item數據，而不是與標題的數組。

<div id="List of Workbooks" ng-controller="TableauListCtrl" > 
    <ul> 
     <li ng-repeat="title in titles" ng-click="clickWorkbook(title)" ng-mouseover="mouseoverWorkbook(title)"> {{title.item}} </li> 
    </ul> 
</div>

來源

2013-07-01 21:42:06 pasine

Angular應用程序的變量將不會顯示在HTML中

回答

相關問題