jQuery conflict with Angularjs

Asked

Viewed 430 times

0

I’m having a problem with AngularJS and jQuery. When I only use jQuery in the layout, the menu (sidebar) I have opens normally. But when I add Angularjs the menu does not open anymore, it is simply closed. The bad thing is that in the console does not present me any errors.

The code of the Menu

  <!-- BEGIN SIDEBPANEL-->
  <nav class="page-sidebar" data-pages="sidebar" pg-sidebar>
    <!-- BEGIN SIDEBAR MENU TOP TRAY CONTENT-->
    <div class="sidebar-overlay-slide from-top" id="appMenu">
      <div class="row">
        <div class="col-xs-6 no-padding">
          <a href="" class="p-l-40">
            <img src="<?php echo base_url('assets/img/imagens/extra.svg')?>" width="83" height="83" alt="socail">
          </a>
        </div>
        <div class="col-xs-6 no-padding">
          <a href="" class="p-l-10">
            <img src="<?php echo base_url('assets/img/imagens/extra.svg')?>" width="83" height="83" alt="socail">
          </a>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-6 m-t-20 no-padding">
          <a href="" class="p-l-40">
            <img src="<?php echo base_url('assets/img/imagens/extra.svg')?>" width="83" height="83" alt="socail">
          </a>
        </div>
        <div class="col-xs-6 m-t-20 no-padding">
          <a href="" class="p-l-10">
            <img src="<?php echo base_url('assets/img/imagens/extra.svg')?>" width="83" height="83" alt="socail">
          </a>
        </div>
      </div>
    </div>
    <!-- END SIDEBAR MENU TOP TRAY CONTENT-->
    <!-- BEGIN SIDEBAR MENU HEADER-->
    <div class="sidebar-header">
      <img src="<?php echo base_url('assets/img/logo_white.png')?>" alt="logo" class="brand" data-src="<?php echo base_url('assets/img/logo_white.png')?>" ui-jq="unveil" data-src-retina="<?php base_url('assets/img/logo_white_2x.png')?>" width="78" height="32">
      <div class="sidebar-header-controls">
        <button type="button" class="btn btn-xs sidebar-slide-toggle btn-link m-l-20" data-pages-toggle="#appMenu"><i class="fa fa-angle-down fs-16"></i></button>
        <button type="button" class="btn btn-link visible-lg-inline" data-toggle-pin="sidebar"><i class="fa fs-12"></i></button>
      </div>
    </div>
    <!-- END SIDEBAR MENU HEADER-->
    <!-- START SIDEBAR MENU -->
    <div class="sidebar-menu">
      <!-- BEGIN SIDEBAR MENU ITEMS-->
      <ul class="menu-items">
        <li class="pointer m-t-30 open" ui-sref-active="active">
          <a href="<?php echo base_url();?>dashboard" class="detailed"><span class="title">Dashboard</span></a>
          <span class="icon-thumbnail"><i class="pg-home"></i></span>
        </li>

        <li class="open active">
            <a href="javascript:;">
                <span class="title">Business Intelligence</span>
                <span class=" open  arrow"></span>
            </a>
            <span class="icon-thumbnail">
                <i class="fa fa-line-chart"></i>
            </span>
            <ul class="sub-menu">
                <li class="">
                    <a href="<?php echo base_url();?>BI_sellin"><small>Sell In Panel</small></a>
                    <span class="icon-thumbnail"><i class="fa fa-bar-chart"></i></span>
                </li>
                <li class="">
                    <a href="<?php echo base_url();?>BI_analise"><small>Business Overview</small></a>
                    <span class="icon-thumbnail"><i class="fa fa-bar-chart"></i></span>
                </li>
            </ul>
        </li>

        <li class="pointer" >
          <a href="<?php echo base_url();?>visao"><span class="title">Visão</span></a>
          <span class="icon-thumbnail"><i class="fa fa-eye"></i></span>
        </li>
<!--        
        <li class="pointer open">
          <a href="<?php echo base_url();?>ClimaAdmin" class="detailed"><span class="title">Clima</span></a>
          <span class="icon-thumbnail"><i class="fa fa-cloud"></i></span>
        </li>
-->
        <!-- OLD -->
        <li style="visibility: hidden">
          <a href="javascript:;"><span class="title">Lixeira</span>
          <span class=" arrow"></span></a>
          <span class="icon-thumbnail"><i class="pg-trash"></i></span>
          <ul class="sub-menu">


                <li class="pointer" >
                  <a href="<?php echo base_url();?>warmap"><span class="title">WarMap</span></a>
                  <span class="icon-thumbnail"><i class="fa fa-map-signs"></i></span>
                </li>
                <li class="pointer" >
                  <a href="<?php echo base_url();?>visao"><span class="title">Visão</span></a>
                  <span class="icon-thumbnail"><i class="fa fa-eye"></i></span>
                </li>
                <li class="pointer" >
                  <a href="<?php echo base_url();?>distribuidores"><span class="title">Distribuidores</span></a>
                  <span class="icon-thumbnail"><i class="fa fa-bullseye"></i></span>
                </li>
                <li class="pointer" >
                  <a href="<?php echo base_url();?>chart"><span class="title">Gráficos YTD/YTG</span></a>
                  <span class="icon-thumbnail"><i class="fa fa-pie-chart"></i></span>
                </li>
                <li class="pointer">
                  <a href="<?php echo base_url();?>SOP"><span class="title">SOP</span></a>
                  <span class="icon-thumbnail"><i class="fa fa-calendar-check-o"></i></span>
                </li> 
                <li class="pointer" >
                  <a href="<?php echo base_url();?>analise_situacao_cadastral"><span class="title">Análise</span></a>
                  <span class="icon-thumbnail"><i class="fa fa-user-secret"></i></span>
                </li>
                <li class="pointer">
                  <a href="<?php echo base_url();?>construcao"><span class="title">CRM</span></a>
                  <span class="icon-thumbnail"><i class="fa fa-users"></i></span>
                </li>
                <li class="pointer">
                  <a href="<?php echo base_url();?>construcao"><span class="title">VANT</span></a>
                  <span class="icon-thumbnail"><i class="fa fa-fighter-jet"></i></span>
                </li>  
                <li class="pointer">
                  <a href="<?php echo base_url();?>construcao"><span class="title">Clima</span></a>
                  <span class="icon-thumbnail"><i class="fa fa-cloud"></i></span>
                </li>  
                <li class="pointer">
                  <a href="<?php echo base_url();?>db"><span class="title">DB Compare</span></a>
                  <span class="icon-thumbnail"><i class="fa fa-database"></i></span>
                </li> 


          </ul>
        </li>
        <!-- .OLD -->
      </ul>
      <div class="clearfix"></div>
    </div>
    <!-- END SIDEBAR MENU -->
  </nav>
  <!-- END SIDEBAR -->
  <!-- END SIDEBPANEL-->
javascript jquery html css angularjs

  • Why don’t you just use one? Mixing the two is a bad choice.

  • Using the two together is asking to make the application come out sparks. You will have more problems getting around the situation than choosing to be with only one.

  • Wait, let’s think about what you’re doing... you’re using Angular + Jquery + PHP, why? If you’re going to use PHP to manipulate values in the DOM and use Jquery to manipulate the DOM, Angular is totally useless, it doesn’t make any sense for you to load it in this scenario, the only thing you’ll do is generate errors, slowness and consuming more data band of your user.

  • I actually needed to use Angularjs to make a code, adapted from the internet, but as the theme uses jQuery then the menu stopped opening

1 answer

2


A common problem is the order that js are injected into html, jquery with Angularjs works...
If I’m not mistaken the angular should be declared before jquery.
The angular itself already has a "mini" jquery library.

  • I will give your answer as sure, because that’s more or less what I did, but I put the files of the theme angle near where the Angularjs requests are being executed.

Browser other questions tagged javascript jquery html css angularjs

You are not signed in. Login or sign up in order to post.