i am making a test with protractor for my angularjs app
and i came accross the following problem
what i want to do is :
browser.executeScript('$scope.$apply')
i want to do this so that my screen updates/renders so i can get the values on screen
only when i do this it says : $scope is not defined
if have also tried multiple javascript render ways who also failed ,but i am not sure if i have used the right methods for that...
does anybody has the same problem or know how to fix this?
Perhaps you should be using an ng-view directive in your container markup to render html snippets or partials within your index page. Take a look at what ng-view can do (http://docs.angularjs.org/api/ngRoute.directive:ngView) :-)
Related
i am trying to load google map api link inside ng-src directive using this method..
<script ng-src="{{trustSrc(vCustom.googleMapApi.src)}}"></script>
in my controller i have..
v.googleMapApi = { src: "https://maps.googleapis.com/maps/api/js?key=" + config.googleApiKey + "&libraries=places" };
$scope.trustSrc = function (src) {
return $sce.trustAsResourceUrl(src);
}
sometimes it works and some times it doesn't..
The Error
ReferenceError: google is not defined...
i have tried different ways to bind it inside ng-src directive but no success..
it works when i add this script <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script> but it doesn't work dynamically.. any help ??
there is no syntax error and my controller is ng-controller="Custom as vCustom"
any suggestions to bind it in ng-src directive ?
I think you are trying to lazy load the script. Pls have a look at below post it may help. How to asyncronously load a google map in AngularJS?
Let me try to explain the scenario as best as I can :)
The <script> tags are evaluated only once in a web application. Unlike img tags which can have src attribute assigned to different values throughout the app and so are re-evaluated. So what's happening is that sometimes when the compiler gets to your script tag, the model (vCustom.googleMapApi.src) is resolved so it works fine but sometimes it doesn't because the $digest loop (events loop) in angular hasn't finished resolving the model and so the API key isn't passed correctly to script tag which results in not loading the google maps API and then where you're using the map, it throws the error. In that case, to verify, check the script tag on chrome debugger, it won't have the correct API key resolved and the api script won't have been loaded.
Now the question is that what's the solution. You can either implement a directive that initially resolves the APIKey model and then appends the script tag into your HTML, or use the hard coded value as you use it right now (i have usually seen it hardcoded in most of the code and examples i've seen).
NOTE: even if you implement such directive, you have to make sure that you are using the google maps api AFTER your directive has executed and you've got the maps api loaded.
Hope this helps.
I am trying to get experience with angular by making an app (for my own use) and I ran into an issue.
I decided to try to implement lazy loading (like in the "Complex" part of the answer to this question ) and had that working with my own additions to it.
I wanted to make components more self-contained though and decided to try to make a directive to load any javascript dependencies for me.
This left me with the following template html
<div dependencies="app/components/home/controller.js" ng-controller="HomeCtrl as home">
This is the home page.<br />
{{home.test}}
</div>
When I try to load this page I see the following error
Argument 'HomeCtrl' is not a function, got undefined
If I remove the ng-controller directive then my directive works fine and controller.js is loaded.
Based on the source for ngController I thought that setting the priority for my directive higher than 500 would work but it didnt seem to help.
I also tried moving my directives contents from link to compile.pre. It didnt help either, my directives compile runs before the error but compile.pre does not.
Is there any way to make my directive load/run first, before ngController?
I'm a newbie in the Angular space. I've been having trouble debugging my code. Any methods proven more effective in debugging Angular?
open the developer console in the chrome browser, this allows you to:
set breakpoints and see whats going on in your code
use the console in the developer tools while you are waiting in breakpoints to execute some code or check the contents of variables
use the "select element" tool to select any HTML element, then in the console type "$scope" to see what's on the $scope of this element.
general tipps:
use some console.log statment like "running ControllerXYZ now" so you see, when your controllers are executed or when you are transitioning between states.
When using ui-router I find it extremly important to add a console.log statement into $stateChangeStart, $stateChangeSuccess and $stateChangeError event handlers, that shows you when you transition between states or when errors happen on state transitions, without that I am blind...
adding some {{anImportantVariable | json}} into html often is enough to debug stuff.
and the most important: if everything looks ok, and it still does not work, the problem is in 99%:
either a scoping issue (see here: Why do I need $parent to enable the function in ng-click when using ion-scroll?)
or a spelling mistake and a directive is not found (often because of the CamelCase in JS to dash-case in HTML: e.g. ngShow directive in JS is ng-show in HTML, and isOpenattribute in JS is is-open in HTML)
When it comes to inspecting the state: even though I always (irony) write unit tests for each and every conditional in my code (so I normally don't need to debug stuff) this is so far my favourite technique:
<pre ng-show='mymodel.debugPlz'>{{ mymodel.something | json }}</pre>
Simple example : fiddle
Chrome DevTools usually get the job done pretty well. You can insert a debugger; statement anywhere in the code and if Chrome DevTools are open, the code will stop there and you can further add breakpoint and traverse lines one by one. Other than that, there are a few extensions you can use by just searching for Angular in the Chrome Webstore. These usually help with inspecting $scope
what about using AngularJS Batarang chrome extention
it gives you a nice overview of the current scope within the selected element
as you see in the screenshot there is a new scope tab
I am developing a mobile application with left and right drawer, using mmenu (http://mmenu.frebsite.nl/) it is working fine till I've decided to populate items of the right menu on the fly. My app is based on angularjs and all directives of angularjs in body are working fine except all directives inside <nav id="menu-right">somehow, angularjs directives inside the menu definitions are not executed. I am not sure if it is something related with the order of executing javascript. Any help will be really appreciated. Thank you !!
UPDATED (07-April)
An example in jsfiddle http://jsfiddle.net/jmhostalet/wcK8L/
"My controller says" is working in the body but not in the mmenu, in body prints "Hello" but in mmenu prints nothing
The problems you were running into were:
First off the was not included in the declaration
You are changing the DOM without angular knowing about it therefor it does not have a chance to compile the braces {{myCtrlVar}}
It seems like extra work to create a directive but in the long run will allow you to reuse your code more. Also if you are like me and have bad javascript habits; it is nicer to use a framework to keep things straight.
My solution the in the plunker below shows "one way" to do what you are asking. It would be interesting to port the entire MMenu code over to an angular module in order to have more parameters and control.
(Never heard of MMenu, but seems like a cool project -- I will look more into it).
Plunker
(sorry I am inept at using fiddler)
Your fiddle doesn't have controller initialization on #menu-right but on his sibling element and therefore {{myCtrlVar}} expression can't access controllers scope objects.
I am implementing the Angular ui bootstrap modal from
angular-ui-modal
The basic design exemplified by them is on the plunker next to it.
However my application requires it(the modal) to be implemented multiple times in the same single page web application (for saving loading etc).
In this plunker have modified their basic plunker [link : see my plunker here]
In the above plunker I am trying to apply dynamic binding between two controllers.
as in :
I want the value of "checkBind" from the inner controller modal template to be reflected in outer controller.
I know this is not possible like i am trying to do it because the "scopes are different".
Now i am not so convinced for using watches / broadcast /services for this
"petty modal thing".
I have few questions :
Do I have to create a separate controller for using the angular ui modal.
How can i use the "OuterCtrl"(in my plunker) to somehow write all the modal invoking and handler methods(like $scope.open.... $scope.ok .... $scope.cancel etc).
how can I directly bind the value of checkBind from the modal to the outerController in the least code possible(i mean by ignoring the watches services etc)
If "3" is possible then I can really ignore 1 and 2 (but i would still want to know the answer)
I know I am missing something here. Please tell me what is that.
Thanks in advance
I am new to angular and your english is a bit difficult to follow, but can't you instead set it to modal.checkBind and then put that property in a higher scope?