我刚刚完成了关于 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>
关于javascript - Angularjs Controller 打破了我的表达,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37405636/