2016-05-12 8 views
1

Ich habe ein Problem, wo Platzierung von ng-Controller in einem div, bricht die Bindungen, die darin sind. Ich bin ein Neuling mit Angular, also muss ich etwas falsch machen, bitte helfen Sie mir.AngularJs 1 Problem mit Controller und Bindungen

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"; 
} 

Ich habe meinen Code hier eingefügt: http://jsbin.com/yitezu/4/edit?html,js,output

Antwort

2

Schritt 1: ein Modul hinzufügen ng-App-Richtlinie

<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: Registrieren Sie die Steuerung im Modul

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

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

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

Vielen Dank! Ich hatte verstanden, dass das Erstellen des Moduls optional war, ich werde versuchen –

+0

yup das war es! –