The controller function is not being called

Question

i'm learning AngularJs and i complete some courses in internet i know what is module, controller, service, i know some basics directives, and i found in internet a basic AngularJs video tutorial, i'm doing all like in this video but can't understand why it's not work. Here is my code

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


app.controller('todoCtrl', ['$scope', function($scope) {
	$scope.todos = [
		{
			text: "Learn AngularJs"
		},
		{
			text: "Build App"
		}
	];

	$scope.addTodo = function() {
		$scope.todos.push({text: $scope.todoText});
	};
}]);

<html ng-app="todoApp">
<head>
	<title>todo</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<script src="/underscore-master/underscore-min.js"></script>
	<script src="todo.js"></script>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
	<div ng-controller="todoCtrl">
		<h2>Total todos: {{todos.length}}</h2>
		<ul class="unstyled">
			<li ng-repeat="todo in todos">
				<span>{{todo.text}}</span>
			</li>
		</ul>
	</div>
	<form class="form-horizontal">
		<input type="text" ng-model="todoText">
		<button class="btn" ng-click="addTodo()"><i class="icon-plus">Add</i></button>
	</form> 
</body>
</html>

It should insert new text in my array, but when i'm clikcking on the button nothing happens, and no error in console, i realy can't understand why?

The title of your question should be more specific

Martin Thoma
– Martin Thoma

2015-05-30 15:37:25 +00:00
Commented May 30, 2015 at 15:37 — Martin Thoma
– Martin Thoma, Commented May 30, 2015 at 15:37
could you please use plunker or codepen

user944513
– user944513

2015-05-30 15:38:04 +00:00
Commented May 30, 2015 at 15:38 — user944513
– user944513, Commented May 30, 2015 at 15:38

chris · Accepted Answer · 2015-05-30 15:40:19Z

3

The ng-click event is out of the controller's scope. The quick answer is to move ng-controller="todoCtrl" to an enclosing/outer element, which is body in this case.

answered May 30, 2015 at 15:40

chris

1,8171 gold badge14 silver badges13 bronze badges

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

Comments

Donal · Accepted Answer · 2015-05-30 15:45:59Z

Move the ng-controller attribute to the <body> - so that it incorporates the form and the ng-click event. For example:

var app = angular.module('todoApp', []);
app.controller('todoCtrl', ['$scope', function($scope) {
	$scope.todos = [
		{
			text: "Learn AngularJs"
		},
		{
			text: "Build App"
		}
	];

	$scope.addTodo = function() {
		$scope.todos.push({text: $scope.todoText});
	};
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="todoApp">
<body ng-controller="todoCtrl">
	<div>
		<h2>Total todos: {{todos.length}}</h2>
		<ul class="unstyled">
			<li ng-repeat="todo in todos">
				<span>{{todo.text}}</span>
			</li>
		</ul>
	</div>
	<form class="form-horizontal">
		<input type="text" ng-model="todoText">
		<button class="btn" ng-click="addTodo()"><i class="icon-plus">Add</i></button>
	</form> 
</body>
</html>

vinayakj · Accepted Answer · 2015-05-30 16:04:49Z

0

The model and functions should be in scope to be used, so you need to have addTodo function called within todoCtrl scope. Just add a wrapper and have the controller there.

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


app.controller('todoCtrl', ['$scope', function($scope) {
	$scope.todos = [
		{
			text: "Learn AngularJs"
		},
		{
			text: "Build App"
		}
	];

	$scope.addTodo = function() {
		$scope.todos.push({text: $scope.todoText});
	};
}]);

<html ng-app="todoApp">
<head>
	<title>todo</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
	<script src="/underscore-master/underscore-min.js"></script>
	<script src="todo.js"></script>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
	<div ng-controller="todoCtrl" class="wrapper">
    <div>
		<h2>Total todos: {{todos.length}}</h2>
		<ul class="unstyled">
			<li ng-repeat="todo in todos">
				<span>{{todo.text}}</span>
			</li>
		</ul>
	</div>
	<form class="form-horizontal">
		<input type="text" ng-model="todoText">
		<button class="btn" ng-click="addTodo()"><i class="icon-plus">Add</i></button>
	</form>
<div>
</body>
</html>

answered May 30, 2015 at 16:04

vinayakj

5,7013 gold badges30 silver badges49 bronze badges

6 Comments

Pankaj Parkar Over a year ago

what is difference between @Donal and your answer?

vinayakj Over a year ago

Donal is adding controller to body, there would be problem If OP has to add more controllers to different sections.

Pankaj Parkar Over a year ago

you just added a div wrapper.that doesn't make more sense to me..the same thing has covered by Donal & chris answer..

vinayakj Over a year ago

I already answered your question in previous comment.. what if OP has to add more controllers.. unnecessarily they would become nested and can cause issues.So its always better practice to have controllers as far as scope is needed.. does that make sense now

Wahtel Over a year ago

OH MY GOD, i'm so sorry guys, what a stupid situation, i should be more attentive, sorry, and thanx everyone)

|

Collectives™ on Stack Overflow

The controller function is not being called

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related