javascript - Angular 静态 JSON 列表不会呈现

Question

抱歉打扰...但我的脸色发青，快要窒息了。

好的，我正在使用 eclipse 和相关的 Angular 插件来编辑一个简单的列表示例，如下所示，但它拒绝在预览时或在 eclipse 中使用浏览器打开时显示。

这本书是按原样键入的...好的，除了双引号和单引号...eclipse 插件对这些的 react 不同...但我不知道为什么或什么优先这些报价。它似乎更喜欢单引号。

无论如何，这个 JSON 列表不会显示。

有什么建议吗？谢谢

<script>
    alert ('inside js');

    var myModule.controller('AppCtrl', function($scope) { });
    myModule.controller('AppCtrl', function($scope) {
        $scope.stories = [
            {title:'Story 00', description:'Description pending.'},
            {title:'Story 01', description:'Description pending.'},
            {title:'Story 02', description:'Description pending.'},
            {title:'Story 03', description:'Description pending.'},
            {title:'Story 04', description:'Description pending.'},
            {title:'Story 05', description:'Description pending.'}
            ];
        });
</script>

<div ng-controller='AppCtrl'>
    <div class='span4 sidebar-content'>
        <h2>Stories</h2>
        <div class='story' ng-repeat='story in stories' > 
            <h4>{{story.title}}</h4>
            <p>{{story.description}}</p>
        </div>
    </div>
</div>

<script type="text/javascript" 
      src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>

Answer 1

问题是您没有创建 Angular 模块，也没有引导该模块，并且出于某种原因，您复制了 Controller 声明。这是一个包含这些更正的工作示例:

// declare an angular module
angular.module('myApp', [])

// attach controller
.controller('AppCtrl', function($scope) {
  $scope.stories = [
    {title:'Story 00', description:'Description pending.'},
    {title:'Story 01', description:'Description pending.'}
  ];
})

;

标记:

<!-- bootstrap the angular module and add controller to element -->
<div ng-app="myApp" ng-controller='AppCtrl'>
    <div class='span4 sidebar-content'>
        <h2>Stories</h2>
        <div class='story' ng-repeat='story in stories' > 
            <h4>{{story.title}}</h4>
            <p>{{story.description}}</p>
        </div>
    </div>
</div>

Live Demo

您可以将模块缓存到一个变量中，但我认为没有必要这样做。 Angular 已经是一个全局变量——我建议使用它的内部模块系统来存储和获取对模块的引用，而不是创建更多的全局变量。

// make a module
angular.module('myModuleName', [
 // array of dependencies
]);

// get a module
angular.module('myModuleName')
// add a controller to the module
.controller('myCtrl', function() { //etc

而不是:

var myModule = angular.module('myModuleName', []);
myModule.controller(function() {