Javascript Angularjs控制器正在破坏我的表达式_Javascript_Angularjs_Web Applications

Javascript Angularjs控制器正在破坏我的表达式

javascript angularjs web-applications

Javascript Angularjs控制器正在破坏我的表达式,javascript,angularjs,web-applications,Javascript,Angularjs,Web Applications,我刚刚完成了Angularjs上的代码学校课程，一直在忙于更新我当前的网站。有趣的是，如果我编写控制器或指令代码，它就不能工作。但使用其他人的代码似乎效果不错。因此，我强烈怀疑我的应用程序代码有问题，但我似乎一辈子都找不到它省略的代码由…ommit表示，如果它实际相关且我错了，则可以使用以下是相关的html: <!DOCTYPE html> <html ng-app="main" lang="en"> <head> ...omit <

我刚刚完成了Angularjs上的代码学校课程，一直在忙于更新我当前的网站。有趣的是，如果我编写控制器或指令代码，它就不能工作。但使用其他人的代码似乎效果不错。因此，我强烈怀疑我的应用程序代码有问题，但我似乎一辈子都找不到它

省略的代码由

…ommit

表示，如果它实际相关且我错了，则可以使用

以下是相关的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>

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


见我们在一起

{{5+5}
突出显示{{highlight.count}
即将到来的{{now.count}
{{x.month}{{x.count}}

//模块声明
var-app=angular.module（“myApp”，[]）；
//控制器声明
应用程序控制器（'myCtrl'，函数（$scope）{
//一些测试数据
$scope.highlight={count:2}；
$scope.now={count:5}；
$scope.future=[{月份：“六月”，计数：7}，{月份：“七月”，计数：4}]；
});

当你这样做的时候

(function () { })();

角度不再在内部定义

（仅供参考：以上是一个自动执行的匿名函数。 )

所以你必须把它改成

（函数（角度）{}）（角度）
在你的控制器里面也添加这个
var self = this; 
self.highlight.count =2; 

最好不要使用“this”，而是将其重新分配给变量，这样您的作用域就不会混乱。这样就不需要使用$scope（在以后的版本中会删除）
另外，要找出这些错误，请查看您在chrome或IE中的开发工具，您会遇到哪些javascript错误。所有角度误差都有指向相关页面的链接。虽然您的错误是“角度”错误，但未定义。
这很好，但我想知道这些错误是什么。我知道你想让事情变得简单；然而，我的重点是可扩展性。您需要在控制器内定义$scope，而不是$http。如果不定义对象本身，则不能直接定义对象的属性。此外试试Lynda，它有更好的教程。我打算稍后使用$http加载json，但谢谢。我会检查一下，因为CodeSchool课程教我们使用这个。而不是$scope。我对我的习惯没有什么意义，因为我习惯了像java或C++这样的本地OOP，但是我没有经验，如你所看到的。您可以同时注入这两个，但至少需要$scope。使用$scope不是解决方案，因为它将在以后的版本中删除。请参阅我的答案以获得解决方案。