Better way to debug AngularJS?

Question

So I spent approx 4 hours yesterday trying to track down an error in AngularJS.

What I finally discovered was that my directive has an optional parameter, and I had a section of code that was trying to assign a value to this parameter which was throwing an extremely un-useful angular error.

The error is something like:

Error: [$compile:nonassign] Expression 'undefined' used with directive 'testDirective' is non-assignable!
http://errors.angularjs.org/1.3.7/$compile/nonassign?p0=undefined&p1=testDirective
minErr/<@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js:63:12
nodeLinkFn/</parentSet<@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js:7652:1
parentValueWatch@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js:7665:23
regularInterceptedExpression@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js:12831:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js:14215:34
$RootScopeProvider/this.$get</Scope.prototype.$apply@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js:14486:13
ngEventHandler/<@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js:22945:17
createEventHandler/eventHandler@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js:3009:9

As you can see, it tells me the directive that is causing the problem, but nothing about what specific line # or statement caused it.

Is there a better way to determine which line caused this error without commenting out code and trial and error?

I've created a plunker that illustrates the issue:

http://plnkr.co/edit/zxPegBlAxUKdewdmA6Oc?p=preview

Mathew Berg · Accepted Answer · 2015-01-06 18:48:28Z

1

You cannot get the exact line number it happens on, but if you go to the error link you have there:

http://errors.angularjs.org/1.3.7/$compile/nonassign?p0=undefined&p1=testDirective

It might give some insight into what it could be. Seems it does mention that you are using it incorrectly (the third error says the bind wasn't provided)

answered Jan 6, 2015 at 18:48

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

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

4 Comments

Scottie Over a year ago

Yeah, I know what the error means, it's just a huge pain trying to track down which of your bindings caused it and where in the directive it happened.

Mathew Berg Over a year ago

Not sure what to say to that, it specifically mentions that it's something to do with an invalid binding.

Scottie Over a year ago

Maybe a better question to ask... is there a better way to bind optional parameters?

Mathew Berg Over a year ago

The '=' is reserved for two way communication. If you want it to be exposed in the parent, you will have to include it in the attributes. If it's optional, you could instead use scope.$parent.optionValue = "something" in your directive. Though I highly suggest against this.

Collectives™ on Stack Overflow

Better way to debug AngularJS?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related