Question

我刚刚完成了关于Angularjs的CodeSchool课程，并且一直在搞乱更新我当前的网站。有趣的是，如果我编写控制器或指令代码，它就无法工作。但似乎使用其他任何人的代码都可以正常工作。因此，我强烈怀疑我的应用代码存在问题，但我似乎无法在我的生活中找到它。

省略的代码由...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>

和＆＃39; main.js＆＃39;：

(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}];
    }]);
})();

我已多次阅读并搜索了无数页面以寻求解决方案，但我似乎无法让它发挥作用。它不是将表达式视为表达式，而是简单地将它们视为文本，打印出表达式本身。

Answer 1

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

<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>

Answer 2

当你这样做时

(function () { })();

内部不再定义角度。

（仅供参考：以上是一个自动执行的匿名函数。 http://markdalgleish.com/2011/03/self-executing-anonymous-functions/）

所以你必须把它改成

(function (angular) {})(angular);

也在您的控制器内添加此

var self = this; 
self.highlight.count =2;

最好不要使用'this'，而是将其重新分配给变量，这样你的范围就不会搞砸了。这样就不需要使用$ scope（将在以后的版本中删除）

另外要弄清楚这些错误，请查看chrome或IE中的开发工具，了解您获得的javascript错误。所有角度误差都有相关页面的链接。虽然您的错误将是“有角度的”未定义。

Angularjs控制器打破了我的表达

2 个答案: