Hi I'm having a strange problem. I'm not able to plunker it, so I will just try to explain and maybe someone has had the same problem or can give me a hint to where to search.
I've been setting up an angular app with some tests in webstorm. I only test services. Then, when I wanted to build the html layer on top, I can't get the html to bind with the controllers. I don't get any errors in the console, the routing works, text in the html file is displayed, and "console.logs" in the controller prints out all scope values correctly. Even custom directives work and the passing of attribute values to them.
However, all databindings in the html do not work. Wherever {{name}} and such is in the html file, nothing is displayed. The same goes for directives. Even though the "console.log(scope)" in the directive shows that the attributes have been set correctly.
Another strange thing is that I cannot write in input fields.
I really have no clue as I've checked every thing I could think of. I'm using webstorm 7.0, AngularJS v1.2.0rc1 and I'm using the "open in browser" in Webstorm.
This is working in other projects I'm making, so I'm really wondering what's going on here.
Related
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
I'm developing a chrome extension using angularjs (with a content script open a popup),but it meet some problem when it's parent page already use angularjs, it's parent try to compile the content inserted, so is there anyway to prevent the parent angularjs instance to compile the element I added, and the angularjs instance in extension can bootstrap the element manually ?
It's hard to answer without an example, or what is your extension flow.
Basically, angular shouldn't compile anything on it's own, it either does it when bootstrapping the app, or when you explicitly tell it to.
What I guess you are doing is have the html change before angular is loaded, and then when it loads it compiles your stuff as well.
Try adding your directives etc. after angular has finished loading on the main page (how to detect that angular finished bootstrapping is a whole other question :)).
And after you add your new element with your ng-app <div ng-app="myAngularExtensionApp"></div>, however I am not sure how it will work if it's nested inside another angular application, I don't think it will allow you to do it. If the ng-app of the main application is on the body you can add your div outside the body (weird, but legit), and it shouldn't conflict. but if it's on the html it might cause problems. (I tested it, you can bootstrap another one inside an existing app, but it can cause some really weird problems, I'd avoid it).
A bullet proof solution, that makes things a little more complicated is one I used and I like it alot:
Create an iframe on the page, which you add the angularJS script inside, and it will be your application, do not set the src of the iframe, but rather use iframe.document.open() .write(
<html><body ng-app="myExtensionApp"> etc (i.e. a complete bone structure of an angular page), now since the src is the same, you won't have same origin problems, and you can access the main page with top.
I recommend having services that will interact with the main page.
I am not sure what you want to do, but if you want a directive on the main page for example, first create it in the iframe, then move it to the main page via jquery, it will belong to YOUR angular application (since scope binding is based on prototype and the chain doesn't get broken by moving the element), it will keep reacting to changes to your scope.
However you have to remember that styles are unaffected etc.
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
My full code is at:
http://plnkr.co/edit/6EQFXL?p=preview
The "delete row" and "delete column" buttons are dynamically created. Right now when I click on them nothing happens. How can I get them to run the corresponding handlers? Is there a better way to do what I am trying to do (make a resizable and editable grid)?
Main Issue
The problem is that your creating the html for the button without compiling it through angularjs. You could just send this through the $compile service to get it to work but that's not the angular way. The better option would be to create a directive for tbody and put code there either as a template or in the compile phase of the directive. There's a great video by Misko Henvrey (lead engineer from angular) about creating directives at http://www.youtube.com/watch?v=WqmeI5fZcho. Also you might want to check out the ng-grid created by the angular-ui team at https://github.com/angular-ui/ng-grid to get an idea of how to put together a semantic grid component.
Side Issue
When trying to think in angular you really need to start thinking of the functionality you need and architecting a solution for the functionality (e.g. the directive (s)). What you've done in this question instead is thinking the traditional javascript way (nothing wrong with that in general), which is to say ok I'm limited by what html gives me and I need to tie my javascript in to the stuff I'm given through hooks on classes and ID's. I highly recommend taking a look at "Thinking in AngularJS" if I have a jQuery background? to get a more complete view of angular vs jquery/traditional javascript.