my angular app does not work

Question

I have this code:

<!doctype html> <html ng-app="myApp" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="utf-8"> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> </head> <body> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("FirstCtrl",function ($scope) { $scope.count = 0; $scope.increment = function (){ $scope.count = $scope.count + 1; } }); </script > <div ng-controller="FirstCtrl"> <button class="btn" ng-model="count" ng-click="increment()"> Click to increment</button> {{ count }} </div>

what is wrong with it? When I work without controllers it's works fine but when I use app and app.controller It will not work. why is that? am I doing something wrong?

ok, so your app still doesn't work after making the changes that I suggested in my answer? It doesn't help to get an accurate answer which is helpful to you and others in the future if you change the broken code after getting a few answers..... — Claies
– Claies, Commented Feb 12, 2015 at 23:41
yes Claies thanks, the problem was version of angular I was using, thank you so much for your great help — Masoud Motallebipour
– Masoud Motallebipour, Commented Feb 13, 2015 at 1:05

user1031721 · Accepted Answer · 2015-02-12 23:20:49Z

The "Controller as" syntax is only available from version 1.1.5+

By what i know when using "Controller as" and you want to reference a variable with the assigned controller alias (in your case "app1") then you should assing the variables with "this." syntax in the controller, or access the variables without the "app1", then it will try to get it from the scope.

http://jsbin.com/zehagogoku/3/edit

var app = angular.module("myApp", []); app.controller("FirstCtrl",function ($scope) { this.count = 0; this.increment = function (){ this.count = this.count + 1; }; $scope.count = 0; $scope.increment = function(){ $scope.count = $scope.count + 1; }; });

Claies · Accepted Answer · 2015-02-12 23:20:44Z

You are mixing styles here. In your HTML, you are using the Controller As syntax, where you write FirstCtrl as app1. This makes an object called app1 on the scope, which is an instance of your FirstCtrl. app1.count, app1.increment(), etc. would be properties of the FirstCtrl object.

In your controller, you are not creating properties on the controller. You are, instead, assigning your variables as properties on the $scope object.

Using $scope has advantages, in that it is essentially a global object, so it is accessible from everywhere in your app. However, it's disadvantages are also rooted in the fact that it's a global object.

You can either change your javascript to match the Controller As syntax, as shown:

app.controller("FirstCtrl",function () { //create an alias to this for consistent reference var app1 = this; app1.count = 0; app1.increment = function (){ app1.count += 1; }; });

Or, you can change your HTML to use $scope:

<div ng-controller="FirstCtrl"> <button class="btn" ng-model="count" ng-click="increment()"> Click to increment</button> {{ count }} </div>

change in the javascript:

$scope.count += 1;

note, you don't have to reference $scope inside the HTML, as it's presence is implicit. However, this line in your javascript $scope.count = this.count + 1; will never work in either case, again because you are mixing styles.

Also, as mentioned, Controller As syntax requires Angular 1.1.5 or higher.

Collectives™ on Stack Overflow

my angular app does not work

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related