1

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.

Improve this question
2
  • Yes ng:switch and ng-switch are 2 different ways to use the same directive Commented Sep 17, 2013 at 19:21
  • It looks like you're using Angular 0.10.5, jsFiddle supports 1.0.2, 1.0.3 and 1.1.1. I changed from your version of Angular to a newer version and some things were still broken but stuff began to work. I'm going to make an educated guess and say that var scope = this was an older Angular method for fetching scope and the new method is to have it passed as a parameter. Which is why your code would be messing up as it would be using an unsupported means for receiving the proper scope. Commented Sep 17, 2013 at 19:24

3 Answers 3

Reset to default
1

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.

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

Comments

1

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.
Improve this answer

Comments

1

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!

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.