AngularJs 1のコントローラとバインディングの問題

ng-controllerをdivに配置すると、その中にあるバインディングが破損しています。私はAngularの初心者ですので、何か間違ったことをする必要があります。助けてください。AngularJs 1のコントローラとバインディングの問題

HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" crossorigin="anonymous"> 
    <title>Third Excercise</title> 
</head> 
<body> 

<div ng-app> 
    {{"Hello World"}} 
    <div ng-controller="FirstCtrl"> 
    <h1>{{ data.message + " world" }}</h1> 
    <div ng-class="data.message"> 
     test 
    </div> 
    </div> 
</div> 

<!-- Imports --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" charset="utf-8"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
    integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" 
    crossorigin="anonymous" charset="utf-8"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js" 
charset="utf-8"> 
></script> 
<!-- Local Files--> 
<script src="js/third-excercise.js" charset="utf-8"></script> 
</body> 
</html>

JS：

function FirstCtrl($scope) { 
    $scope.data = {message : "Hello"}; 
    //$scope.data.message = "Hello"; 
}

私はここに私のコードを貼り付けました： http://jsbin.com/yitezu/4/edit?html,js,output

出典

2016-05-12 Jorge A.

ステップ1：をNGアプリディレクティブ

にモジュールを追加します。

<div ng-app="myApp"> 
    {{"Hello World"}} 
    <div ng-controller="FirstCtrl"> 

    <h1>{{ data.message + " world" }}</h1> 
    <div ng-class="data.message"> 
     test 
    </div> 
    </div> 
</div>

step2：コントローラをモジュールに登録する

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

angular.module('myApp') 
.controller('FirstCtrl', FirstCtrl); 

function FirstCtrl($scope) { 
    $scope.data = {message : "Hello"}; 
}

出典

2016-05-12 16:47:28

ありがとうございました！私はモジュールの作成がオプションであることを理解していましたが、これを試してみます –

うん、それでした！ –

AngularJs 1のコントローラとバインディングの問題

答えて

関連する問題