CODEWITHSUNDEEP
javascriptangularjs
user6123723
user6123723

Reputation: 11136

AngularJS scope issue

I'm trying to improve this JsFiddle code by adding Angular routes, controllers, services etc. http://jsfiddle.net/ProLoser/bp3Qu/light/

The problem I'm facing is with the following lines of code

function FormBuilderCtrl(){
var scope = this;
....

When I tried to convert the above to to this new fiddle http://jsfiddle.net/uhsarp/MdvQk/1/

function FormBuilderCtrl($scope){
...

Now everything breaks. I'm trying to understand what var scope=this meant and why passing the scope to the function isn't working.

Also, all the Angular directives are delcared as ng: instead of ng- (Example: ng:switch instead of ng-switch). Are they equivalent? Thanks.

Update:

I have followed the advise from the answers and upgraded the Angular version. I also removed var scope = this and injected the scope directly. http://plnkr.co/edit/Clr2T9V8J0z3oxW2HXur?p=preview

The only problem I now face is that whenever I change the field type from "text" to "radio buttons", I get an error (Line 45 in the script.js in the above plukr page)

TypeError: Cannot call method 'indexOf' of undefined

I checked the code but can't seem to be able to spot the problem.

Upvotes: 1

Views: 298

Answers (3)

Nepoxx
Nepoxx

Reputation: 5358

Beteraraba's is right to say that you should probably use a newer version of AngularJS.

That being said, this is not why it breaks.

In your example, var scope = this simply makes a variable called "scope" refer to this. So that later in the code you attribute functions to "this". For instance FormBuilderCtrl().editing is going to be set to false because there's a this.editing = false; inside that FormBuilderCtrl(). var scope = this; had nothing to do with Angular's $scope!

If you want to use $scope, you'll need to inject it, but that would change the idea behind that code. If you decide to do that, you can simply do var scope = $scope and your code will work, but keep in mind that the functions and attributes defined in your controller will now apply to the $scope and not just the controller!

Upvotes: 1

Arnaud Rinquin
Arnaud Rinquin

Reputation: 4306

You are running a very outdated version of Angular.

I forked your fiddle and updated the version to the latest stable and monkey patched your script:

  1. I inject $scope as intended
  2. I set scope = $scope so I don't have to replace it all along your code.

I.e:

   function FormBuilderCtrl($scope){
     var scope = $scope;

Few advices that to ease your development by avoiding spaghetti coding:

  • use different files
  • create a module and add your controllers / directives to it.

Upvotes: 1

D.Evangelista
D.Evangelista

Reputation: 6541

Your angular version is very old.

Use the last one: http://code.angularjs.org/1.1.5/angular.js

You need, also, include ng-app in your body tag (or in a wrap div).

I can not find anywhere in the docs any reference to ng:tag style. So, I reccomend that you try to use the ng-tag approach.

Last, I strongly reccomend that you read the developer guide to get a better understanding in how you should contruct your app.

Upvotes: 1

Related Questions