Angular JS not working in subpages - javascript

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

Related

Javascript code in main body is not working with angular template

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!

JavaScript doesn't work inside of ng-view

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:

How the page loading is done in this template

I opened this template and I found that when I navigate from page to another that a progress bar appear and start to load inside the page itself then disappear and the page appear without the page itself reload like normal using of href tag. The URL become like this
http://localhost/devoops/index.php#ajax/charts_xcharts.html
I want to know only how to load a page like this, what scripts I should use ?. If you gave me just an example or a link to an article that would be enough.
Here is the template please test it to know what I mean as I dont know how to describe that.
devoops template
The magic in this template are made by LoadAjaxContent function on line 1136 on js/devoops.js file.
This function was used to: start on line 3361, menu on line 3400, top menu on line 3466 and search field on the line 3475, all in the same file.
I hope you at least know some knowledge of JQuery which in fact was what was used here.
BTW the link does the rest and all templates are in the ajax folder.
I think what you referred to is so called the partial load or refresh partial views.
There's a lot of frameworks out there can achieve things like this.
Check out AngularJS and a module called ui-router
Basically, say you have a page like this:
http://levi-lu.net/#/about
If I'm using ui-router, http://levi-lu.net is the main view, and the part after hashtag (/about) is a route under this view, switch between routes will only affects part of the page (partial refresh).

AngularJS - ng-view Not Loading

I have an application I am trying to set up as a SPA with AngularJS that hooks into a REST API off of our internal SharePoint site. I am having issues with ng-view and getting any of the views to actually load. Both views are setup as ng-template and whenever it tries to find one, it kicks back a 404 Not Found like it's still looking for a separate page.
Here is the plnkr.
I know that none of the data will load because of this coming from an internal SharePoint list, but the views should at least load something to give us an idea of what is going on.
Edit: I cannot actually answer this since my account is too new, but I needed to move the ng-template script blocks inside of the ng-app div so that they would be recognized.
Just so that this doesn't stay as unanswered:
I needed to move the ng-template script blocks inside of the ng-app div so that they would be recognized by Angular and not loaded in the wrong order compared to the DOM.

Ember reload layout scripts

Exist some method to reloading a script layout wiht emberjs using ajax html called?
Example
Page load all the information
Press a button which looking with ajax a html (including a script handlerbar) and load it on a div element
Take that layout view and used it with a view.
NOW I Just can use the layout view that i created before to call the emberjs object. but i need created too many layout and i want to loading with each request from the user.
Thanks i u can help me
I had a very similar need (dynamic template loading).
Maybe a part of your solution is here: Is it possible to load a Handlebars template via Ajax?

Categories

Resources