3

所以我已经知道，当我看到答案时，我会感到非常愚蠢，但我正在研究 egghead.io 上的 AngularJS 教程。当我这样做时：

<!DOCTYPE html>
<html>
    <head>
        <title>AngularJS Tutorials</title>
        <link rel="stylesheet" href="/foundation/stylesheets/foundation.min.css">
        <script src="js/main.js"></script>
        <script src="lib/angular/angular.js"></script>
    </body>
    </head>
    <body>
        <div ng-app="myApp">

            <div ng-controller="FirstCtrl">
                <input type="text" ng-model="data.message">
                <h1>{{ data.message }}</h1>
            </div>

            <div ng-controller="SecondCtrl">
                <input type="text" ng-model="data.message">
                <h1>{{ data.message }}</h1>
            </div>
        </div>  
</html>

使用我的 JavaScript 文件（名为 main.js）：

var myApp = angular.module('myApp', []);
myApp.factory('Data', function() {
    return { message: "I'm data from a service"}
})

function FirstCtrl($scope, Data) {
    $scope.data = Data;
}

function SecondCtrl($scope, Data) {
    $scope.data = Data;
}

My{{ data.message }}未被识别为 AngularJS 绑定（即在页面中它显示为
{{ data.message }}而不是"I'm data from a service"）。但是，如果我将所有 JS 代码<script></script>直接放入 HTML 中的标签中，它就可以正常工作。我是否缺少参考资料或其他内容？似乎在任何地方都没有找到这个，可能是因为它真的很基础。

4

3 回答 3

2

我要去JUMP THE GUN并建议你切换这些

<script src="js/main.js"></script>
<script src="lib/angular/angular.js"></script>

至

<script src="lib/angular/angular.js"></script>
<script src="js/main.js"></script>

如果这可行，那是因为在未加载事件时尝试使用角度之前。

小费

现在，当我第一次开始使用 javascript 时，这些事情经常发生在我身上。对您来说最好的事情是学习如何使用console它会在控制台中告诉您的一些与cannot read property 'module' of undefined该含义相同的angular内容undefined，因此未加载。

于 2013-08-05T22:56:34.877 回答
1

在控制器之前加载 Angular，而不是之后

于 2013-08-05T22:55:51.490 回答
1

在行之间切换：

<script src="js/main.js"></script>
<script src="lib/angular/angular.js"></script>

您需要在加载 Angular 后运行 main.js

于 2013-08-05T22:56:00.013 回答