AngularJs ngSwitch directive break my others javascript libraries

Question

I've made a Web App using Angular, jQuery and Isotope.js. here is the relevant code in my view template :

<head>
    <script type="text/javascript" src="../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../Scripts/isotope.min.js"></script>
    <script type="text/javascript" src="../Scripts/trackpad-scroll-emulator/jquery.trackpad-scroll-emulator.min.js"></script>
    <script type="text/javascript" src="../Scripts/angular.js"></script> 
    <script type="text/javascript" src="../Scripts/angular-route.min.js"></script>
</head>

<body ng-app="App">
    <div id="main-container" data-ng-controller="MessageController">
        <div ng-switch="moduleState">
            <div ng-switch-when="messagespanel">
                Messages panel here !
                <nav id="activity-panels">
                   <ul>
                      <li>menu1</li>
                      <li>menu2</li>
                   </ul>
                </nav>
            </div>
            <div ng-switch-when="settingspanel"> 
                Settings panel here !
            </div>
        </div>
    </div>
</body>

The fact is I've put an button which toggle the moduleState value between messagespanel and settingspanel.

When I click twice, I perfectly switch back to my messages panel view, but jQuery and isotope.js won't work again.

For instance, this will not work after a switch :

$("nav#activity-panels > ul > li").on("click", function () {
      console.log("ok");
}

what is weird, it's that my scrollbar is customized by trackpad-scroll-emulator Js library, and this will keep working after. but none of my jquery and isotope code.

I've done a bit of search, and of course the ngSwitch directive decide wether or not to create a DOM piece. But if it's recreated after the first switch, my jQuery selector should recognize again my DOM elements ? Or do I have to refresh something, or reload jQuery ?

Thanks for any help,

You need to reinitialize your plugins in this case. Most likely you are working with jQuery in non-Angular way. You would not have this problem i you used custom directives. — dfsq, Jun 29 '15 at 08:26
Are you trying to add JS files on the fly ?? What i mean is don't expect that while changing the templates, the relevant script files will be loaded as mentioned in the script tag. You must load 'em all in the index page and then initialize as your template loads. — Manish Kr. Shukla, Jun 29 '15 at 08:29
Ok, so @dfsq when you mean in non-Angular way, what do you mean ? I'm in the need of manipulate DOM after it being created. So I really think jQuery is more efficient than angular for this part of the job. — Alex, Jun 29 '15 at 08:32
And @ManishKr.Shukla i don't load js files on the fly, and my web app is mono-page, so what do you mean by "index page" ? thanks for answers anyway — Alex, Jun 29 '15 at 08:34
What I mean is that looks like you use something like this `$(selector).plugin(options)` - and this is not going to work well in Angular. You can use jQuery of course, just make sure you use directives. Otherwise you are going to have problems like you described. — dfsq, Jun 29 '15 at 08:42
@dfsq thank you it's clearer like this ! Like I noticed earlier, I'm gonna migrate my classic jQuery calls to Angular Directive, and give a feedback here. — Alex, Jun 29 '15 at 08:46

score 1 · Accepted Answer · edited May 23 '17 at 11:43

1

You should'nt use jquery like that when using angularJS, you must use angular inner mechanism to properly bind html and events like click. Never in your code you should find .on('click', ...) functions. You should definitely read that post.

Instead you should use a dedicated directive where you will plug an ng-click function

That way, your ngSwitch will create/delete the directive on the fly and enable/disable automatically the ngClick functionnality without the need to manually add onClick events.

edited May 23 '17 at 11:43

Community

1
1

answered Jun 29 '15 at 08:37

Jscti

14,096
4
62
87

Ok I got your point ! i'll refactor my app to replace on("click" by ng-click and the other functions as well. I'll keep in touch when I've finished, to reward you guys :p – Alex Jun 29 '15 at 08:40
If we can't make a correct work by using both jQuery and Angular it's too bad ! I've rewritten some of my functions in order to use the embedded "mini-jQuery" into angular, and the ng-switch didn't broke the features. thanks to everybody for help – Alex Jun 29 '15 at 13:25

AngularJs ngSwitch directive break my others javascript libraries

1 Answers1