A component with angular features will not persist

I have a menu component:

    <nav class="mxmls-mobile-nav"> 
  <button class="mobile-menu-btn visible-xs visible-sm " ng-click="asideVm.open = false">
    <i class="ion-android-close"></i>
  </button>
</nav>
<a class="navbar-brand visible-xs visible-sm " ui-sref="layout.dashboard">
 <img src="assets/images/logo/mxmls-logo.png" alt="" height="30" >
</a>
<nav class="mxmls-main-menu">
  <ul class="mxmls-menu">
    <li ui-sref-active="active" class="{{item.extraClass}}" ng-repeat="item in asideVm.menuItems" ng-click="asideVm.activateSubmenuParent(item)" ng-class="{'close-menu':item.submenu, 'active': item.activateSubmenu || item.active}">
      <a ui-sref="{{item.ui_state}}" ng-if="item.ui_state" ng-click="asideVm.changeType(); asideVm.removeSubmenuActiveState();" ng-bind-html="item.name">
        <!-- <i class="fa {{item.icon}} pull-left"></i> -->
        <!-- <span class="selected"></span> -->
      </a>
      <a ui-sref-active="active" ng-if="!item.ui_state;" ng-click="item.submenu = !item.submenu;asideVm.saveStatusMenu()">
        <!-- <i class="fa {{item.icon}} pull-left"></i> -->{{item.name}}
        <span class="icon-arrow pull-right"></span>
      </a>
      <ul class="mxmls-submenu" ng-if="item.sections" ng-class="{'hide':item.submenu}">
        <li ui-sref-active="active" ng-repeat="subItem in item.sections" ng-class="{'active': subItem.active}">
          <a ui-sref="{{subItem.ui_state}}" ng-click="asideVm.changeType(); asideVm.activateSubmenuParent(subItem);">
           <!-- <i class="fa {{item.icon}} pull-left"></i> -->{{subItem.name}}
           <!-- <span class="selected"></span> -->
         </a>
       </li>
     </ul>
   </li>
 </ul>
</nav> 

The items in asideVm.menuItems have the attribute "active" to focus on it when clicked, using the class "active" (Everything is fine here). However, when clicking on a link like:

<a href="/acm/venta/search" class="btn btn-base ng-binding" ui-sref="layout.acm.state.search({type:'venta'})">Start analysis</a>

the "active" class gets lost in the menu. I need assistance :/

The array "asideVm.menuItems" is stored in the cookie (along with the "active" attribute) and retrieved when the page loads.

Answer №1

Success, I've discovered the solution!

To start, create a variable to serve as a flag to indicate initialization:

vm.isInitialized = true;

Next: using "scope.watch", monitor for changes in the "url/location"; if a change occurs and it's not an initialization, utilize the "$state.reload()" function to refresh the component/directive/control:

 $scope.$watch(function(){
    return $location.path();
      }, function(value){
        if(!vm.isInitialized)
        {
          console.log(value);
          $state.reload();
        }
        else
        {
          vm.isInitialized=false;
        }
      });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to break down a collection of multiple arrays

Looking to transform an array that consists of multiple arrays into a format suitable for an external API. For example: [ [44.5,43.2,45.1] , [42, 41.2, 48.1] ] transforming into [ [44.5,42], [43.2,41.2] , [45.1, 48.1] ] My current code attempts this ...

Looping through items with ng-repeat and creating a submenu with M

When constructing a menu from a JSON file with submenus using the JQuery.mmenu plugin, I encountered an issue when trying to implement the submenu structure with ng-repeat. The raw HTML approach worked perfectly, but as soon as I introduced ng-repeat to dy ...

React Native reminder: Unable to update React state on a component that is unmounted

I am seeking clarity on how to resolve the issue in useEffect that is mentioned. Below is the data for "dataSource": [{"isSelect":false, "selectedClass":null, "zoneId":1026, "zoneName":"tomato"}, ...

A Simple Guide to Setting a Background Image in React Native with the Nativebase.io Library

What is the process for including a background image in React Native with the help of the Nativebase.io Library? I have a specific screen where I need to incorporate a background image, with all other elements positioned at the center of the image. ...

What is the best way to apply an animation class to a modal upon clicking a button?

When I click the "x" button on the modal, I want the animation to occur. However, what currently happens is that the modal closes without the animation. Then, upon reopening the modal, the animation occurs without any clicking involved. Below is my curren ...

Converting HTML widget code to NEXTjs code for integration in an application (CoinMarketCap Price Marquee Ticker)

Having trouble integrating the CoinMarketCap Price Marquee Ticker Widget into my NEXTjs app. I'm outlining my process and hoping for some suggestions from others who may have attempted this. Template Code: To embed the widget in an HTML page, here is ...

Trouble with installing Enmap due to better-sqlite3 error

For a while now, I've been struggling to get enmap installed. Despite searching the web exhaustively, I haven't come across any solutions that work for me. Every time I try npm i enmap, I consistently encounter this frustrating error: One part o ...

Inadequate text alignment

Trying to create a header mockup for a website featuring branding elements like a logo and brand name. Utilizing Angular.js for the webpage development process, incorporating a URL for the logo image from an online source. Encountering alignment issues th ...

contrasting ionic and android software development kits

I am interested in developing an android application and have some knowledge about Ionic, which is also used for creating mobile apps. I have more experience with Android development and am curious to understand the distinctions between the two platforms ...

Generate a unique splatter design using Cascading Style Sheets

Imagine a circle link that transforms into a playful animation with a pink shape when you move your mouse over it: I'm torn between different ideas on how to achieve this effect. One approach could be to use individual elements for each drop, utilizi ...

"Discover the step-by-step process of transforming an input field value into a checkbox with

I've been experimenting with creating a To-Do list using HTML, CSS, and Javascript. I've managed to capture the input field value in a fieldset so far. However, my goal is to find a way to transform the input field value from the textfield into a ...

Ensuring Consistent Visual Harmony Across Linked Elements

As part of my project developing an iPad app with PhoneGap and jQuery Mobile, I am looking to incorporate a preview pane within a carousel. This preview pane should display smaller versions of the other panes scaled inside it. The panes are dynamic and upd ...

`amqplib - What is the current number of active consumers on the queue?`

Seeking insight on using the amqplib module for Node JS and RabbitMQ: 1) Is there a method to determine the number of subscribers on a queue? 2) What is the process for ensuring that each queue has only one consumer key? Appreciate any guidance! ...

Measuring Time Passed with JavaScript

I've been working on a small piece of code that needs to achieve three tasks: User should input their birthday User must be able to view the current date When the user clicks a button, they should see the time elapsed between their birthday and the ...

Is there a way to switch the cursor to a pointer when hovering over a bar on a ChartJS bar graph?

Here's the chart I created: createChart = function (name, contributions, idArray) { globalIdArray = idArray; var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: "bar", data: { lab ...

How can I create a custom validator in Angular 2 that trims the input fields?

As a newcomer to Angular, I am looking to create a custom validator that can trim the input field of a model-driven approach form. However, I have encountered difficulties during implementation. When attempting to set the value using setValue() within th ...

Is there a way to position one DIV behind another?

Hey, I'm working on my first project and running into some trouble with divs. I'm trying to position the firework behind the central text but can't figure it out. Can anyone lend a hand? I need to add more details in order to submit the que ...

Leveraging arrays generated from two separate MySQL queries for dual selection functionality with JavaScript

I have successfully populated the first HTML select with results from the first query. Now, I would like to store the results from the second query in either a Json file or XML and then use plain javascript (not jQuery) to populate the second HTML select ...

Triggering a JavaScript function when the mouse moves off an element

Recently, I created the following code snippet for marquee effect. The main functionality it is missing is triggering a function on mouse-over. <marquee class="smooth_m" behavior="scroll" direction="left" scrollamount="3"> <span style="float:le ...

Is it possible to hide the <dd> elements within a <dl> using knockout's custom data binding upon initialization?

I have implemented a <dl> where the <dd> can be expanded/collapsed by clicking on the corresponding <dt> using knockout's data binding. The inspiration for my solution came from a tutorial on creating custom bindings. Currently, I h ...