I've run into an issue with an angular app I'm working on. I've defined a controller which adds one variable to the scope. After the page loads, I can see that the scope doesn't have the variable - when I try to inspect it in chrome dev tools, it returns an undefined. I've put a break point in the controller code which initialises the variable and I can see that it is not being hit. I've checked for javascript errors and there are none.
But now I'm stuck - I don't know how to proceed with debugging this issue. Why would a controller that has been specified on the page with an ng-controller directive not be initialised? And what techniques are available for debugging such an issue?
Update: I've already tried batarang - doesn't help. The moment I try to enable inspection in batarang, it reloads the page. I'm able to inspect the scope using techniques specified in ng-book (https://www.ng-book.com/p/Debugging-AngularJS/) but I'm still not making much headway.
Finally figured out the problem: There were 2 issues:
angular auto bootstrap - there were two nested elements in the DOM which were trying to do auto bootstrap. This is not supported according to the documentation.
the angular bootstrap was kicking in before the DOM had finished loading.
So we used requirejs' domready plugin to defer angular bootstrapping till the dom is ready.
Try the chrome extension Batarang, it extends developer tools. Its handy for debugging scopes, models & dependencies.
https://github.com/angular/angularjs-batarang/
https://chrome.google.com/webstore/detail/ighdmehidhipcmcojjgiloacoafjmpfk
UpDate:
Just found this, javascript stack trace Spy-js:
https://github.com/spy-js/spy-js
http://spy-js.com/
Related
I often use a variation of angular.element($0).scope() as a way of debugging angular issues.
However since moving to a new computer Developer tools always returns Uncaught ReferenceError: angular is not defined
Angular itself is running fine and is not minified (in dev environment) and I've 'inspected' an element which is in the correct scope.
I've worked out the issue. In the screenshot below there is a dropdown currently selected as 'top', it was set to JSON Formatter (a plugin I have). So it was trying to run the command in the wrong scope.
Ignore the top error (failed to load), that's unrelated.
Please try after clicking on an HTML element which is enclosed with an $scope.
I have posted the issue in the source github issues page
https://github.com/Siyfion/angular-typeahead/issues/84
but was wondering if I could find a quicker resolution here.
I am following the loading dependencies, namely jQuery, Angular, and typeahead (bundle), by placing them ahead in my index.html file of the angular-typeahead directive.
Yet I get an error in my Angular template when I include the directive as a class. I have wrapped the controller code in a document ready function and that did not resolve it. I am able to type $("input").typeaway in the browser console, and it is eventually defined. Adding a timeout wrapper in the typeaway source directive code didn't resolve this timing issue. Any thoughts?
Can I dynamically assign the directive using pure jQuery in my controller and have the scope refresh? Simply adding the class "sfTypeahead" and then $scope.$apply() did nothing but add the class.
Thanks - any ideas would be MUCH appreciated.
I'm asking this question coz, the app that I'm testing flows from a non-angular app. I'm my case the whole page is non-angular and it contains a link. On clicking on it opens the new angular view. The problem that I'm facing is that the app is manually bootstrapped. I even added the ng-app under a div and mentioned that as rootElement in the script. However this is throwing an error saying "unable to synchronize with the page. No injector found. The reason maybe that it's not under ng-app. Later when I turn off the synchronization I can't locate elements using their binding values.
I've tried most of the workarounds on net and none of them seems to fix this. Could any of please help
Manually bootstrapped apps are a pain. When you turn off browser synchronization you are telling Protractor that Angular is not and will not ever be present. Because by.binding is Angular-only, and there is no Angular present to bind to, that particular locator isn't going to return an element. I use Protractor for non-Angular apps quite often and it works just fine as long as you don't try to use locators that are Angular-specific. Your options are:
Test all of the non-Angular stuff manually, then the Angular stuff separately
Test everything without the Angular locators
First of all I know I am going to have to change the title, hopefully I can better form my question based on the answers.
I am working on a breadcrumb using angular (let me know if the link fails) but for some reason it isn't working as I would expect. Everything seems fine but when I click the link to go to the next page (sorry in advance for the annoying alert). I get the following error...
Uncaught TypeError: Cannot read property 'addCrumbs' of undefined
The directive is clearly working so I am guessing it is this line that is causing the issue...
angular.element('#crumb').scope().addCrumbs(crumbs);
Can someone explain why this is not working?
Why you'r doing it wrong :)
First of all, Angular is designed for single page applications and can simulate navigation between pages through modules like ngRoute (official) or ui-router (from Angular UI Team, more powerful, more complicated).
Your example doesn't follow the "Angular way" cause you have two "index" page, I mean, Angular (and your app) is re-loaded each time you click on an internal link so you can't share variables between pages (in your case you want a "breadcrumb" shared between pages).
Your breadcrumb directive should share the breadcrumb array via data binding instead of using an external controller explicitly. See here for more infos.
The ng-repeat directive should be applied to the li element instead of the ol element.
Updated Plunkr
See the updated version of your Plunkr.
I added ngRoute module and separated pages. BUT I think it's not a very reusable and clean way for breadcrumbs.
Conclusion
I recommend you to use a dedicated module to handle your breadcrumb, like ng-breadcrumb (see the demo here)
I am trying to understand how AngularJS framework works. For that reason I want to debug angularjs framework code (not my application code) however I am not able to figureout how angular gets attached to DOM and starts compilation. Can anybody help me to findout which is piece of code or lines in angularjs script file from where AngularJS kicks off and starts parsing and compilation.
you need to read the application bootstrap section in the angular docs, but basically angular will take your html, starts the compilation processes, at which point it will start replacing any custom html or directives with the matching templates, no scopes or bindings done just yet, html might not even be in dom yet, afer that angular goes to linking process, where bindings are made, scopes are created and html gets attached to DOM, thats the short version you can find it here
https://docs.angularjs.org/guide/bootstrap