2016-03-19 15 views
2

私はAngularJSを学んでおり、データバインディングに問題があります。 $scope.mytextから値を取得しようとすると、{{mytext}}と表示されます。コードは次のとおりです。角度の変数値を取得

<!DOCTYPE html> 
<html ng-app="myApp"> 
     <head> 
    <title>Hello</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> 
</script> 
    <script> 
     var MainController = function ($scope) { 
     $scope.mytext = "Angular JS Rulez"; 
     } 
    </script> 
</head> 
<body> 
<div ng-app> 
    <div ng-controller="MainController"> 
     <p>{{mytext}}</p> 
    </div> 
</div> 
</body> 
</html>` 
+0

正しい字下げを含めて、コードを適切に書式設定するための努力をしてください。 –

+1

@Knight以下のコードを試しましたか? –

答えて

1

アプリの設定方法に多少の誤差がありました。

アプリを定義したことはありません

、あなたが二回ng-appを宣言している、あなたはng-appには何も割り当てられていないとあなたが参照CDNとのエラーが発生した二度目。アプリを定義したら、コントローラをこのアプリに割り当てる必要がありました。

以下のコードはあなたのために機能し、このjsfiddleデモをチェックしてコードを確認することもできます。

<!DOCTYPE html> 
<html ng-app="myApp"> 
    <head> 
    <title>Hello</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> 

    <script> 
      var myApp = angular.module('myApp',[]); 
      myApp.controller('MainController', ['$scope', function($scope) { 
       $scope.mytext = "Angular JS Rulez";; 
      }]); 
    </script> 

    </head> 
    <body> 
    <div ng-controller="MainController"> 
     <p>{{mytext}}</p> 
    </div> 
</body> 
</html> 
+1

ありがとうございました:) – Knight

1

あなたはhtmlでアプリを呼び出すように見えますが、どこにも定義していません。あなたはする必要があります。

  1. javascriptの部分で「MyApp]を」を定義し、次に
  2. はそれにコントローラを割り当てます。

あなたのコードは、どのアプリケーションでも正しく定義されていないMainControllerを呼び出します。パウロが言及して

この場合、基本的なセットアップは、次のとおりです。

var myApp = angular.module('myApp', []); 

myApp.controller(MyAppController, ['$scope', function($scope) { 
    ...add $scope elements here ... 
]); 

また、あなたは、HTMLで二回NG-アプリを呼び出す必要はありません。

関連する問題