Question

很抱歉打扰......但我脸红了，因此窒息死了。

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

这个出现在按原样键入的书中......除了双引号和单引号之外...... eclipse插件对那些反应不同......但我不知道为什么或什么优先于这些报价。它似乎更喜欢单引号。

无论如何，这个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

问题是你没有创建一个角度模块，也没有引导该模块，并且出于某种原因，你有重复的控制器声明。这是一个有关这些更正的工作示例：

// 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() {

Answer 2

在此次尝试中，您错过了HTML中的ng-controller和ng-app 这是工作jsbin http://jsbin.com/qeninogakeji/1/edit

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="appViewModule">
  
    <div class='span4 sidebar-content' ng-controller="AppViewController">
        <h2>Stories</h2>
        <div class='story' ng-repeat='story in stories' > 
            <h4>{{story.title}}</h4>
            <p>{{story.description}}</p>
        </div>
    </div>
</div>
<script>
var appViewModule = angular.module('appViewModule', []);

    appViewModule.controller('AppViewController', 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>

＆＃13;

角度静态JSON列表不会呈现

2 个答案:

Live Demo