2017-09-04 12 views
1

私はAngular JSを初めて使っていて、チュートリアルを通して勉強していて、奇妙なものを見つけました。Angular JS間違ったコントローラ名の評価の差

私は今、私はこのコントローラ

<!doctype html> 
<html ng-app="myModule"> 
<head> 
    <script src="Scripts/angular.min.js"></script> 
    <script src="Scripts/Script.js"></script> 
</head> 
<body> 
    <div ng-controller="myController"> 
     {{ message }} 
    </div> 
    <div> 
     {{ message }} 
    </div> 
</body> 
</html> 

これは

として私に出力を返す使用するHTMLページを作成している

//Create the module 
     var myApp = angular.module("myModule", []); 

    // Creating the controller and registering with the module all done in one line. 
     myApp.controller("myController", function ($scope) { 
     $scope.message = "AngularJS Tutorial"; 
     }); 

とコントローラを定義している私たちは、JSファイルに仮定しましょう

AngularJS Tutorial 

ここで間違ってコントローラの名前を入力すると

この場合
<!doctype html> 
<html ng-app="myModule"> 
<head> 
    <script src="Scripts/angular.min.js"></script> 
    <script src="Scripts/Script.js"></script> 
</head> 
<body> 
    <div ng-controller="myController"> 
     {{ message }} 
    </div> 
    <div ng-controller="myController1"> 
     {{ message }} 
    </div> 
</body> 
</html> 

それは今どこないコントローラmyContoller1が存在せず、私はエラーを取得し、また、それでも {{メッセージ}}いない第1の試みに存在する(第1方法も

AngularJS Tutorial 
{{ message }} 

を与えますdivで定義されています)、そのまま印刷されている必要があります。

誰でもこの現象を説明できますか?

答えて

0

コントローラの適用範囲は、適用されたDOM内でのみ適用されます。

最初に、の値がdivの divより外側にあるため、divの値が表示されませんでした。 myController divにバインディングをラップしているとうまくいくはずです。

myController1コントローラ(ヒント:何かがJSに動作しない場合は、エラーのコンソールを確認してください)のインスタンスを作成中に、その角度 myController1を持っていない第二の場合のように失敗した
<div ng-controller="myController"> 
    <div> 
     {{ message }} 
    </div> 
    <div ng-controller="myController1"> 
     {{ message }} 
    </div> 
</div> 

関連する問題