I'm working in a web, I need to load my div content using this jQuery function:
$('#mainPage').load($(this).attr('mainContent'));
In my index.php I have configured the directive ng-app=".MyApp" and also I'm using ng-controllers there and it works fine, but using some ng-controllers inside the loaded page in the #mainPage div it doesn't works fine, as a solution I have tryied:
angular.element(document).ready(function() {
angular.bootstrap(document, ['MyApp']);
});
and it loads correctly and then the controller is working fine, but if I load again the div space then Angular crash with the error:
Error: [ng:btstrpd] http://errors.angularjs.org/1.4.3/ng/btstrpd?p0=....
(that means angular is bootstapped)
I can't load the div's content using ng-includes directive because I shoud use jquery and javascript inside the loaded page, then I don't know how to solve this problem...
Thanks very much!!!
Related
I have designed an htm page which has javascript and all has worked well,
but when I tried to put some of the div sections of the page inside a template which would be read by
angularjs application all the element which require javascript to display properly were not working
properly or displaying the element properly.
I later discorvered that angular has its own jquery etc. But the problem is that I am using some
elements which are not custom made and making changes to the code may make the whole program fail.
What can I do to get all the sections to work properly?
This is the angular section
var app = angular.module("app",[]);
app.controller("controls",["$scope", function($scope){
}]);
app.directive("myTemplate", function(){
return{
templateUrl: "template_file_with_div_section.htm"
};
});
HTM SECTION
<div ng-controller="controls">
<div my-template></div>
</div>
Some of the sections are using datatable etc
some the scripts i am using are
<script src="angular/angular.js"></script>
1. jquery.min.js
2. tables/jquery-datatable.js
3. jquery-datatable/jquery.dataTables.js
4. jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js
5. jquery-datatable/extensions/export/dataTables.buttons.min.js
there are over fifty different jquery scripts
UPDATE
When i enter the template's url through http://url/#template_name
The template shows up in the web page so it shows that it works fine but there are sections within the template which would perform some operations (e.g. sorting etc) this sections relies on javascript which are in the main page.
These are the sections which are not working at all.
When I put the angular script after the table script. The template did not show up,
But when I put the angular script after the table script as shown above, the template showed up but the script where not working at all
It is little hard to guess what is exactly happening.
But, here are some things that you might want to consider:
Make sure you have defined ng-app in your HTML.
Also, the other part of the application (like you are saying sections) should come under your ng-app.
Make sure that all your scripts are added and loaded properly.
Each page has binding to certain controller or directive with appropriate template URL.
Hope that helps!
I'm attempting to use a thumbnail grid in my AngularJS application. I've set up a directive for the HTML template part, but am having trouble initializing the jQuery part that expands a tile on click.
I know this is a typical issue when attempting to use jQuery in Angular apps. The jQuery script is very simple, I just don't know how to make it work in Angular. The script:
<script>
$(function() {
Grid.init();
});
</script>
Thanks for any advice/help!
Edit:
Page is here: tinyurl.com/jgbrpd6. As you can see, if you click on one of the elements, nothing happens because the jQuery script is located in the HTML of the templateUrl file.
templateUrl file is here: tinyurl.com/zr9ylqf. As you can see, if you click on one of the elements, it behaves as expected, becuase it is now outside of the AngularJS app.
I'm a AngularJS-Beginner and i've just started using ng-include to better structure my html blocks.
I'm using jquery.scrollTo.js to add a button to scroll to the top. However i've noticed that if I place the button inside tpl-footer.html and load it via ng-inlcude while having jquery.scrollTo loaded in index.html, it won't work.
I either have to place the button inside index.html or load jquery.scrollTo.js inside tpl-footer.html.
My question: How can I access loaded scripts in index.html via ng-included templates?
Cheers!
I've been trying to use JavaScript and jQuery to validate or to auto-fill forms inside ng-view.
I've read several articles like:
AngularJS ng-view not loading js
jquery bxslider is not working with templates inside ng view
Angularjs does not load scripts within ng-view
I have an app with has a master index page that display another page content through ng-view
page (A) - display data from the database.
page (b) - fill-out form page where I have my JavaScript and jQuery validation.
So far if I put jQuery after AngularJs my ng-view works and it displays data from the database correctly, but my JavaScript doesn't work. If I do the opposite, including jQuery before AngularJs, my javascript works but page (a) gets this error message:
I have a HTML page that works as a container of different HTML sub-pages/Usercontrols.
I use Ajax get of jquery to load the HTML of the sub page in the container page.
I am using a angular js directive in one of the sub pages.
The angular js directive is not working in the sub page and the potential issue can be that my anguarl js is firing before the HTML of the subpage gets loaded into the container page. And thats why angular js dont see the directive in the subpage it needs to process.
Is there a way to delay the execution of the angular js until subpage gets loaded.
I agree with #m59's assessment, but if you are unable to follow that route you will need to use the manual bootstrapping see manual initialization