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>

これが機能する場合は、イベントがロードされていないときに angular を使用しようとしていたためです。

ヒント

さて、私が最初に 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 に答える