i´m trying to initialize onsenui after some js files are loaded, but then
ons.bootstrap() is causing the errors.
when i´m using a sample from onsenui everything is working quite good, but in my
project, i have to load the js files dynamically and synchronously
and then ons.bootstrap(); give me the this error
"'AppController' is not a function, got undefined"
if same js libs in same order are declared in html doc with script tags everything is working good.
i´ve found that if the scripts are loading through normal script tags and then i´m waiting till html document is fully loaded and then call ons.bootstrap() through developer tools i got same error.
so the question is how to initlaize onsen ui after document is loaded?
Hope someone can help, I´m not very familiar with angularJS/OnsenUi... first project
thanks
I have create 2 samples to demonstrate my problem.
working like onsenui samples.
jbBgmd http://codepen.io/anon/pen/jbBgmd
not working like in my case.
BoWXdP http://codepen.io/anon/pen/BoWXdP
any idea?
You are trying to load Onsen after the elements have been rendered, that's why it gave an error. You should always execute Onsen before the components are rendered.
If you want to execute some code after the DOM has been loaded, you should use ons.ready() function, you can take a look at it in the official documentation.
Here you can find the fixed and working CodePen: http://codepen.io/andipavllo/pen/ZbKzRy
Here is the edited JS:
ons.bootstrap().controller("appController", function ()
{
ons.ready(function(){
console.log("works")
})
});
Hope it helps!
Related
I am trying to get a hang of react-data-grid and the examples on their page have a "play around with it" link that takes you to jsfiddle. For some reason, I am unable to see the output on jsfiddle.
What would be a solution for this?
Some of the dependencies are deprecated in the latest react version used by jsfiddle. On inspecting the resources accessed by their page and comparing it with fiddle, you can hack a solution by doing the following in jsfiddle :
remove react-with-addons.js and react-dom.js from external resources tab.
add react.min.js and react-dom.min.js in external resources.
replace jsfiddle-integration-babel.js in script with this.
Try this fork. It doesn't update contents in table, which is the same state as in page.
Hi guys im just setting up a new project for some work im doing trying to get something working quickly to keep momentum up. However i seem to be having a problem with getting Angular Material to load properly. Im using Node and bower to get my modules which seems to be loading them fine.
However when ever im loading up the page my console reports that its hitting an unreachable code after a return statement like the title suggests. this is actually being hit in the angular material js file that is being imported by bower.
I have no idea why this is happening and any help to progress past this point would be brilliant thank you.
EDIT
I possibly have found a fix to the issue I was having. The backend of the web application I was using was controlled by Django and there was a conflict between Angular js and Django in that they were using the same tags to show values for variables. This was stopping Angular Material from instantiating properly. I still get the unreachable code warning but now Material is working as I expect it to.
I hope this helps some people debug the problems they are having when seeing this issue.
Include the minified version of the library. Automatic Semicolon Insertion is different depending on your browser, if the library code has a return statement broken across two lines, it might end up with a semicolon where one shouldn't be. Using the minified version fixes this because the statement won't be broken across lines.
Include this:
<script src="bower_components/angular-material/angular-material.min.js"></script>
Instead of this:
<script src="bower_components/angular-material/angular-material.js"></script>
I am new to angular and it seems very interesting
I am creating a template for a promotional page and struggling to understand what is causing an issue on it - half of the script stopped working...
My fiddle is in here see >
fiddle example
or Plunker
I have working example without route...
Can you advice me how to fix this issue please
First of all, i'd suggest you to separate your project to different files based on best practises
Secondly, 'config, controller, factory' etc are methods of angular.module object. So you need to retrieve it first like
angular.module('<moduleName>').config(...)
or use some variable.
http://plnkr.co/edit/CK5R2cS7Zd9T9Kun9Epc?p=preview
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'm fairly new to Angular but I've been using it the past few weeks and have managed to work out most of the problems I've come across. This one however has me stumped.
I have an app that pulls in tweets from Twitter then - using an angular filter - pulls out all the urls and styles them as links. This part works fine but the client decided that links from Twitter were't safe so they wanted a disclaimer to fire every time a link was clicked. Simple enough - I hijacked the link and swapped the href for an ng-click="openLink('url')". This is where the problem occurred - the ng-click doesn't work.
I'm pretty sure the problem has something to do with $compile() - I've had similar issues before - but I have no idea when or where to call it.
I've created a Plunkr that is a lite version of what I'm after. The link at the top isn't loaded in dynamically and fires the alertUrl() function fine, but all the links generated by the filter fail.
I'm probably missing something really simple but it's been bugging me a while now so any help will be massively appreciated.
Thanks,
Sam
Well you are correct that the html\content that you emit needs to be compiled for angularjs to resolve the alert function.
I have changed your plunker, and inject a compile directive (from here)
See it in action here
The basic idea here is to compile the content produced from twitter feed dynamically.
<p compile="tweet.text | convertLinks"></p>