jQuery thumbnail grid in AngularJS - javascript

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.

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!

AngularJs and Jquery error in loaded div content

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!!!

how to run Jquery Click function on ng-click in Angularjs

I am working on a mobile app where I am using MDL for app UI and Angualr js
I bought the theme from themeforest named "FAB".
I am using angular js to show the data from server using API's where I am displaying all the products which is coming from server.I want to run Add to Cart section on the page which has some in-built jquery applied to it. if I dont write Angualr js then my Jquery is working fine.
here is the link of my Page without Angular js
Link without Angular js ,
link with angualr js
I am new to angular js .. so it is something which is blocking jquery click event
While I'm creating plunker for the answer, I ran into the same problem.
But, It was solved by inserting app.js before </body> tag. I think it might be related with angular's inside operation.
Here are different plunkers(app.js in head, app.js in body)

Jquery load() and Manually bootstrapping AngularJS

I have a website full of exercises. I'm using jQuery load() to load parts of pages when a link on my website is clicked.
This takes the relevant part of the wanted page (the exercise itself) and puts it in a div for the user to interact with. While this works wonderfully for most of the website, since the vast majority is written in php, I'm trying to get it to work with the parts that use AngularJS as well.
I used this question as a starting point: AngularJS + JQuery : How to get dynamic content working in angularjs
It worked fairly well but only for one exercise. I think that manually bootstrapping angularJS could fix my problem but so far have had issues. How can I manually bootstrap my angular app upon jQuery load?
Here's some of what I've tried so far but it doesn't work:
irscript.js (ir is the name of the exercise) relevant code:
var ir = angular.module("ir", []);
ir.controller('MainCtrl', function($scope) {
//application logic.
});
angular.element(document).ready(function() {
angular.bootstrap(document, ['ir']);
});
index.html relavent code:
<script>
$("#content").load(String(url + " #exercise"), function(){
$.getScript("irscript.js")});
</script>
<div id="content"></div>
The hope is that irscript.js can be replaced by a function that returns the proper script for the loaded exercise at some point but just getting the above to work would be amazing.

Angular JS not working in subpages

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

Categories

Resources