I'm new to angular, I've the following JS file initiated on index.html page, since I'm working with angular I had to make partial views of different page, there are functions in this file which performs small tasks for instance minimizing and maximizing the widget body. handling JQuery DataTables, the jquery function inside the scripts-replaced file only works on index page, first I thought there is JQuery Conlfict I've used noConflict which resolved the conflict as General I guess, because if I paste the code of partial view directly into index.html file it works absolutely fine. but NOT single function working on any partial view.
Help will be really appreciated.
Thanks
A function from scripts-replaced.js file
var handleWidgetTools = function () {
jQuery('.widget .tools .icon-remove').click(function () {
jQuery(this).parents(".widget").parent().remove();
});
jQuery('.widget .tools .icon-refresh').click(function () {
var el = jQuery(this).parents(".widget");
App.blockUI(el);
window.setTimeout(function () {
App.unblockUI(el);
}, 1000);
});
jQuery('.widget .tools .icon-chevron-down, .widget .tools .icon-chevron-up').click(function () {
var el = jQuery(this).parents(".widget").children(".widget-body");
if (jQuery(this).hasClass("icon-chevron-down")) {
jQuery(this).removeClass("icon-chevron-down").addClass("icon-chevron-up");
el.slideUp(200);
} else {
jQuery(this).removeClass("icon-chevron-up").addClass("icon-chevron-down");
el.slideDown(200);
}
});
}
File included and Initialized on index.html file
<script src="js/scripts-replaced.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function($)
{
App.init();
});
</script>
also I've tried to make angular directive make the following angular directive but it won't work, I don't know why.
Angular Directive:
Main_Module.directive('everyPage', function()
{
return {
restrict: 'A',
link: function(scope, element, attrs)
{
angular.element('.widget .tools .icon-chevron-down, .widget .tools .icon-chevron-up').handleWidgetTools();
}
}
});
HTML
<a every-Page href="javascript:;" class="icon-chevron-down"></a>
every-page