ngcontroller in Angular JS

Question

I'm having some trouble understanding how to use ng-controller. I've a form controller in eventController.js.

<html ng-app>
<head>
<script src="angular.js"></script>
<script src="eventController.js"></script>
</head>
<body> 
<div>
<h3>My Event:<i>{{event.name}}</i></h3>
</div>
<div ng-controller="formController">
<form >
<label>Event Name:</label>
<input type="text" ng-model="event.name" placeholder="Event Name">
</form>
</div>
</body>
</html>

Now the heading even.name is not getting displayed when I'm using ng-controller="formController" in that division otherwise its working fine. When I use ng-controller on the whole page as a division then I get {{event.name}} and not the content.

How can I display the content of event.name and also use the controller on form together ?

What mistake am I making ?

Marius Schulz · Accepted Answer · 2013-09-30 11:10:45Z

3

The event.name property is only set within the scope of the controller being used. In your case, the <div> tag introduces a new scope. Within it, {{event.name}} will be data-bound to and replaced by the value of event.name.

In your code example, the <h3> tag lives outside of the scope defined by <div ng-controller="formController">, so {{event.name}} won't be data-bound against your model property.

To solve your problem, put the ng-controller attribute on a common ancestor element of your heading and the form, like that:

<div ng-controller="formController">
    <div>
        <h3>My Event:<i>{{event.name}}</i></h3>
    </div>
    <form >
        <label>Event Name:</label>
        <input type="text" ng-model="event.name" placeholder="Event Name" />
    </form>
</div>

For a slightly more complex example, check out the documentation: AngularJS: ngController.

edited Sep 30, 2013 at 11:10

answered Sep 30, 2013 at 11:01

Marius Schulz

16.5k12 gold badges65 silver badges100 bronze badges

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

2 Comments

Anathema.Imbued Over a year ago

I tried that earlier, but I'm getting {{event.name}} and not the binded data <body> <div ng-controller="formController"> <div> <h3>My Event:<i>{{event.name}}</i></h3> </div> <form > <label>Event Name:</label> <input type="text" ng-model="event.name" placeholder="Event Name">

Marius Schulz Over a year ago

@Anathema.Imbued Take a look at this JSFiddle showing that the solution is indeed working: jsfiddle.net/tAnNp.

Collectives™ on Stack Overflow

ngcontroller in Angular JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related