I'm adapting one angular 1 project to use the webpack module bundle system. Almost everything is working as expected, but one material component doesnt get applied well. It is the md-input-container.
What I think it is the cause of the problem: I'm using ng-cache-loader to load the html templates. So, I think, in someway the tags are not processed or so. Because I put the md-input-container in the main index.html (which is not loaded by ng-cache-loader) and it works.
Also, I'm using lazy loading of modules and states with ocLazyLoad and ui-router-extras future state, maybe this has something to do with the problem...
At first I thought it was only css problems, but I have confirmed its not.
(Posted on behalf of the OP).
This weird fix solved the problem.
Related
I've got rc7 installed and my module and component works.
However I want to use it on a webpage and make my modules and components only bootstrap if the current page has the selector to be bootstrapped with.
I am using one module and declare my components. But I can't bootstrap at least one. As far as I understand I should be fine using one module for the whole website and dynamically bootstrapping components if the page has the element that needs the components bootstrapped.
Currently I get errors if I don't boostrap anything in my module and I also get errors if I bootstrap a component and the selector doesn't exist on the page. Is there a way of avoiding these errors? Or am I using wrong stuff? Should I be using something else for this purpose instead of modules and components?
You need to check yourself (document.querySelector(...)) if the page contains a matching selector before you call platformBrowserDynamic().bootstrapModule(AppModule);
It works fine when the page is opened normally but does not when its open as a modal. The expressions show up as literal text. Do I have to use the Angular Bootstrap UI? Does anyone have an example of how this is done? My modals are stored as partials
You need to use
http://angular-ui.github.io/bootstrap/
its simple to use, just include the javascript, a little CCS and angular.module('myModule', ['ui.bootstrap']);
Once added you have todo some things a different way, plenty of examples on the angular site. One of the main issue it solves is problems when href # is used.
This may not be the fix for you, but you should be using it. Do you have a plunk?
You need to add the Boostrap as a dependency to the angular Application,
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
and App,
angular.module('modalTest',['ui.bootstrap','dialogs'])
Here is an existing CodePen
As others have said, libraries exist to bring bootstrap into the angular world. Keep in mind, a lot of things are done differently when using them in how you set up your DOM. Bootstrap uses a lot of things in location.hash for controls, which conflicts with angular routing.
The issue is that when Bootstrap pops up a modal, angular has no idea that happened, and that it has a new part of the DOM to compile. If you don't want to pull in the angular bootstrap library (which is pretty good, and should be used if your starting a new page from scratch with the two), you can use $compile linked with a callback into angular (probably via a factory you make) to manually compile what you need.
i am new to angular js .
Please help me.
i readed some blogs on angular views and route and i implemented the code for view and route .
the code was not working. As I include angularoute.js to code then it works fine for me .
But in all the blogs they are not including the angularoute.js to code.
So my question is that is route logic was removed from angular.js or i am doing something wrong.
In angular 1.0, routing was part of the core angular.js module. Since 1.2, they've made it an external module, in an external file. What you're doing is thus fine, and the blogs you read have probably been written before angular 1.2, or neglected to precise that this additional file had to be added.
The official documentation is quite clear about it, though:
First include angular-route.js in your HTML:
<script src="angular.js">
<script src="angular-route.js">
...
I strongly suggest you to use aungular-ui-router. Basically it's the same as angular-route but it has much much more features. There are the nested views option, also you can pass parameters over different states. You can easily assert in which state you are and based on that change the view or do something else. Another aswe feature is that you can have multiple named view on a single page which means you can load different templates on this page. The documentation is pretty awesome with this one as well. You might want to take a look. Also when you have some issues you better paste some code so people could see where could something possibly be wrong.
The Angular UI - 3rd party lib.
I've working on an AngularJS solution, in which ngSanitize is used to sanitize markup received from an Ajax call.
This markup will occasionally contain iframe tags.
When I test the app with iframe tags, ngSanitize seems to remove them.
Do you have any suggestions as to how to get ngSanitize to ignore iframe tags and allow them to render?
Looks like this isn't possible using the current version of angular-sanitize.
An issue has been logged, to ask for the whitelists to be made extensible, so we can add more tags to them, such as .
Meantime, Brandy Isom has written a fix to enable such customization, and sent it as a pull-request to the Angular team. You can use this fix in the meantime.
(Hopefully it gets incorporated into the next version.)
I updated angularjs to 1.2.0-rc1 and added in ng-route as a dependency and added the angular-route.js file. In this build it is now separate.
Clicking on a link for example that has a bookmark href assigned which i used for bootstrap..
href="#collapse1"
Now angularjs is actually trying to change the route to #/collapse1
Is this a bug or am i missing something
Can anyone help?
Is there some additional configuration that i need to do to stop this from happening ?
Expected behavior
The expected behavior is what happens in angular before (i think i was using 1.0.8) ... the link does nothing as far as angularjs is concerned i.e. NO ROUTE CHANGE, of course bootstrap picks does its own thing and shows an accordion in this example.
This angularjs feature.
Use
href="#/#collapse1"
for correct location change.
because i had the same problem. At my point Bootstrap wasn't loaded and so he tried to route this collaps as an route. After i loaded bootstrap manuel to this view, it works fine.
Hope you understand my bad english ;)