0

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>
3
  • that should be every-page Commented Jan 10, 2016 at 14:27
  • Thanks Let me check if it works Commented Jan 10, 2016 at 14:35
  • TypeError: angular.element(...).handleWidgetTools is not a function Commented Jan 10, 2016 at 14:39

1 Answer 1

0

You are trying to call your handleWidgetTools() function as if it is a method on angular.element, which it isn't. All you need to do is run your function to set up the jQuery click event handlers, like this:

(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);
        }
    });
})();
Sign up to request clarification or add additional context in comments.

2 Comments

Thanks Let me try that.
It gives the following error Uncaught TypeError: (intermediate value)(...) is not a function(anonymous function) @ scripts-replaced.js:505(anonymous function) @ scripts-replaced.js:2298 (index):363 Uncaught TypeError: Cannot read property 'init' of undefined

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.