javascript - Angularjs Controller 打破了我的表达

标签 javascript angularjs web-applications

我刚刚完成了关于 Angularjs 的 CodeSchool 类(class),并且一直在忙于更新我当前的网站。有趣的是,如果我编写 Controller 或指令代码,它就不起作用。但使用其他人的代码似乎工作得很好。因此,我强烈怀疑我的应用程序代码有问题,但我似乎一辈子都找不到它。

省略的代码由 ...omit 表示,如果它确实相关并且我错了,则可用。

这是相关的 html:

<!DOCTYPE html>
<html ng-app="main" lang="en">
<head>
    ...omit
    <!--Script Includes-->
    <script src="/script/jquery.min.js"></script>
    <script src="/script/bootstrap.min.js"></script>
    <script src="/script/angular.min.js"></script>
    <script src="/script/main.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
    ...omit
    <div class="container content">
        ...omit
        <div id="schedule">
            <h1>See us in Concert</h1>
            <ul class="list-group" ng-controller="ScheduleController as schedCtrl">
                <li class="list-group-item">{{ 5 + 5 }}</li>
                <li class="list-group-item">Highlights <span class="badge">{{schedCtrl.highlight.count}}</span></li>
                <li class="list-group-item">Upcoming <span class="badge">{{schedCtrl.now.count}}</span></li> 
                <li class="list-group-item" ng-repeat="next in schedCtrl.future">{{next.month}} <span class="badge">{{next.count}}</span></li> 
            </ul>
        </div>
        ...omit
    </div>
</body>
</html>

和“main.js”:

(function () {
    'use strict';
    var app = angular.module('main', [ ]);

    app.controller('ScheduleController', [$http, function ($http) {
        // Some test data
        this.highlight.count = 2;
        this.now.count = 5;
        this.future = [{month: "June", count: 7}, {month: "July", count: 4}];
    }]);
})();

我已经读了好几遍并搜索了无数页来寻找解决方案,但我似乎无法让它发挥作用。它不是将表达式视为表达式,而是将它们视为文本,并打印出表达式本身。

最佳答案

您的代码中存在多个错误。使用更简单的编码方式,使用以下示例:

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js" ></script> 
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <div class="container content">
        <div id="schedule">
            <h1>See us in Concert</h1>
            <ul class="list-group">
                <li class="list-group-item">{{ 5 + 5 }}</li>
                <li class="list-group-item">Highlights <span class="badge">{{highlight.count}}</span></li>
                <li class="list-group-item">Upcoming <span class="badge">{{now.count}}</span></li> 
                <li class="list-group-item" ng-repeat="x in future">{{x.month}} <span class="badge">{{x.count}}</span></li> 
            </ul>
        </div>
<script>
//module declaration
var app = angular.module("myApp",[]);
//controller declaration
app.controller('myCtrl',function($scope){
    // Some test data
    $scope.highlight = {count:2};
    $scope.now = {count : 5};
    $scope.future = [{month: "June", count: 7}, {month: "July", count: 4}];
});
</script> 
</body>
</html>

enter image description here

关于javascript - Angularjs Controller 打破了我的表达,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37405636/

相关文章:

javascript - select2 容器小于下拉列表

java - 在 Web 服务器上运行 Java

javascript - 使用 AngularJS 禁用/启用 html 元素

javascript - Yii框架2.0使用POST方法的AJAX请求

javascript - 使用 onclick 处理程序而不是链接会影响站点性能和 SEO 吗?

javascript - 将 module.factory 注入(inject) angularjs 中另一个模块的最佳方法

javascript - 使用 Angular ng-repeat 迭代多层数组

java - struts到spring迁移消息资源

iphone - 打开 native 应用程序。来自 Safari

javascript - 如何在asp中获取表行的n个数字输入类型的值?