I am using a Bootstrap 3 based template called Unify and implemented Angular JS with ui-routing. Most of it works fine. Just my whole navigation is in the header and I use ng-include to inject the header from a html template file. Them the hover dropdown js plugin does not work anymore. My Code looks something like this.
<header ng-include="'templates/header.html'"></header>
<!--=== Content Part ===-->
<div class="container">
<div class="row" >
<div ui-view autoscroll="false"></div>
</div>
<footer ng-include="'templates/footer.html'"></footer>
and the plugin is called before the tag with the rest of scripts needed.
It works fine when I use the files as is without the Angular JS it also works fine with Angular JS if I don't inject the code but leave it in the index.html as is but not as now.
Hopefully somebody can help me out because I have the same problem with the parallax slider with for convenience sake I just keep in the index.html for now.
Thanks,
Gerd
Thanks to the detailed answer Chris T gave me in another question I found it is a scope related issue. Now I am loading the hover dropdown js within the template file and it works fine.
I ran into the same issue, and tried loading the hover dropdown js in a script tag in the template. That resulted in an error (Like the one here: Can AngularJS ng-include load a Jinja2 processed html on FLASK?)
So instead of doing that, I got it to work by creating a controller for my template and inside the controller I added the drop down hover via:
$('.dropdown-toggle').dropdownHover(options);
Related
I'm not able to render simple angular material components even after including all the necessary dependencies.
HTML
<div ng-app="MyApp" layout="row">
<md-button>Button</md-button>
</div>
JS
angular.module('MyApp', ['ngMaterial']);
Here's the link with all the dependencies included:
https://jsfiddle.net/rxby6cac/3/
Confused... What's the issue with this simple code?
I've updated your fiddle... it was fine, the problem was the load type (see picture below). You have to change it to load type no wrap - <body>.
Additionally, I've note that your are using a angular material RC (Release Candidate) version. As a advice try to use a stable version (move to 1.1.3).
I am working on the implementation of accordion using angular-ui-bootstrap on the top of yeoman swiip-generator.
Using the example from the official angular-ui-bootstrap page to display simple accordion but it is not working, with the error in console state that
angular.js:13920 Error: [$compile:ctreq] Controller 'uibAccordion', required by directive 'uibAccordionGroup', can't be found!
Anybody had the similar problem and know the solution?
the html used:
<div uib-accordion-group class="panel-default">
<uib-accordion-heading>
I can have markup, too!
</uib-accordion-heading>
This is just some content to illustrate fancy headings.
</div>
have you inject the module in your angular.module ?which verison are you using?
Maybe a trivial question here (new to Angular) - however can't seem to find any definitive answer.
Am trying a simple script within it and it doesn't seem to work, is a <script> within the ng-view html allowed?
So in my index.html i have the usual:
<ng-view></ng-view>
And in my ng-view (set by /when) - the page shows "Here is my ng-view content" so i know the ng-view works. Just the script isn't working.
<script>
alert('its working')
</script>
Here is my ng-view content
Thanks.
No <script> tags are not read in the view because that's the way jqLite in angular works. If you want scripts in templates to be evaluated, include jQuery before AngularJS. If jQuery is included, the script will be evaluated. Try removing jQuery, and you see the originally observed behavior.
Working Plunker
You will see that if you comment the jQuery script the alert won't work.
Angular jQlite Docs
You can also include the custom JavaScript files in the index page.
I am working on a little interface built around AngularJS. I have an index.html file and I built a route to a base.html file (using ng-view) which contains several elements including a Morris chart.
However, when I launch my index.html everything from the base.html is displayed... except the chart. And I have the following error in the console :
Error: Graph container element not found
So I tried, to move my scripts morris.js (and 2 others) to the base.html juste after my element (that will contain the chart) is created but it doesn't work neither.
index.html
<!DOCTYPE html>
<div ng-app="pistApp" ng-controller="MainController" id="wrapper">
<div ng-view id="page-wrapper">
</div>
</div>
base.html
<!-- other elements who works but I simplify -->
<div id="morris-area-chart"></div>
Problem solved thanks to Angularjs does not load scripts within ng-view
I just had to include jQuery before angular script.
Include in your project-'raphael/raphael.js','morris.js/morris.js', 'angular-morris-chart/src/angular-morris-chart.js','morris.js/morris.css'
These files will be in your bower_components after the bower install angular-morris-chart.
Try examples in https://angular-morris-chart.stpa.co/
it will work.
I need help. I build web app with angularjs 1.2.5 and angular-ui-router. When I use angular-ui-router v0.2.0 all works fine. But when I have upgraded angular-ui-router to v0.2.5 or v0.2.7 I see empty page. At chrome DevTools console I see that all templates run but nothing showing on page. And are no errors in DevTools console.
I had the same experience moving from v0.2.0 to v0.2.7. Removing ng-cloak from the ui-view element was the solution in my case.
I changed
<div ui-view="page-wrapper" class="ng-cloak" ng-cloak></div>
to
<div ui-view="page-wrapper"></div>
I moved ng-cloak to the template.