AngularJs 1 issue with controller and bindings

Question

I'm having an issue where placing ng-controller in a div, breaks the bindings that are inside of it. I'm a newbie with Angular so I must be doing something wrong, please help.

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

I've pasted my code here: http://jsbin.com/yitezu/4/edit?html,js,output

Gonzalo Pincheira Arancibia · Accepted Answer · 2016-05-12 16:47:28Z

2

step 1: Add a module to ng-app directive

<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: Register the controller in the module

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

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

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

answered May 12, 2016 at 16:47

Gonzalo Pincheira Arancibia

3,6332 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jorge A. Over a year ago

Thanks! I had understood that creating the module was optional, I'll try this

Collectives™ on Stack Overflow

AngularJs 1 issue with controller and bindings

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related