The ion-nav-buttons controller is triggering twice

Seeking a solution for displaying badges based on need inside the ion-nav-buttons. However, facing an issue where the controller inside the ion-nav-buttons is triggered twice. Interestingly, placing it outside the ion-nav-buttons resolves this problem.

For reference, check out this example:

HTML content

<body ng-app="app">
    <ion-side-menus>
        <ion-side-menu-content>
            <ion-nav-bar class="bar bg-main">
            <ion-nav-back-button style="color: #fff">
                </ion-nav-back-button>
                <ion-nav-back-button style="color: #fff">
                </ion-nav-back-button>
                <ion-nav-buttons side="right">
                    <a ng-href="#/notification" class="button" ng-controller="NotifyCtrl">
                    </a>
                </ion-nav-buttons>
            </ion-nav-bar>
            <ion-nav-view name="" animation="slide-left-right"></ion-nav-view>
        </ion-side-menu-content>

    </ion-side-menus>
</body>

Code

angular.module('app', ['ionic']).
controller('NotifyCtrl', ['$scope', function($scope){
  alert();
}]);

Received little help after posting the question on the Ionic forum. Grateful for any assistance provided in advance.

Answer №1

Upon inspection, it becomes evident that the entire DOM is duplicated, resulting in a double call.

To resolve this issue, move your ng-controller="NotifyCtrl" inside the ion-side-menus element.

<ion-side-menus enable-menu-with-back-views="true" ng-controller="NotifyCtrl">
        <ion-side-menu-content>
            <ion-nav-bar class="bar bg-main">
            <ion-nav-back-button style="color: #fff"></ion-nav-back-button>
            <ion-nav-back-button style="color: #fff"></ion-nav-back-button>
            <ion-nav-buttons side="right">
                <a ng-href="#/notification" class="button button-icon icon ion-ios-bell-outline"></a>
            </ion-nav-buttons>
            </ion-nav-bar>
            <ion-nav-view name="" animation="slide-left-right"></ion-nav-view>
        </ion-side-menu-content>

    </ion-side-menus>

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

Updating an object within an array of objects can be achieved by utilizing the setState method in React

I'm currently working with React, where my state is structured as an array of objects. I'm looking for a way to specifically update only one element in the state.data array, such as the object with id 1. I'm curious about: how to properly ...

Issue with PHP Ajax Image Upload

I am currently working on setting up an Ajax image upload feature. Unfortunately, I am encountering issues and unable to identify the root cause. <script> $(document).ready(function() { $("#uploadBTN").click(function(event) { ...

Is there a way to incorporate a bootstrap collapse feature into the dynamically generated cards on this page?

Recently, I've been experimenting with symfony and have successfully generated cards containing FAQ questions and answers. My current challenge is adding a collapse function to these cards. How can I achieve this? I considered implementing an accordi ...

Challenges Encountered with Array.every

Exploring JavaScript default false values, I attempted some manipulations but encountered an issue with Array.every. Can anyone assist me in resolving this? ...

The utilization of the 'this' keyword within an object is not feasible due to its placement within a separate function

The issue I am facing is while using vue.js, but I believe it might also be applicable in plain JS. The problem arises when I am inside a function that is within another function; I have to reference variables by their full path such as Object.variable i ...

Ext.js Ext.grid.Panel with advanced filtering capabilities

I encountered an issue with the following code snippet... Ext.define("Requestor.view.main.RequestGrid", { extend: 'Ext.grid.Panel', // Our base class. A grid panel. ... extensive code ... columns: [ ... additional code ... { ...

Making adjustments to a row in the free jqGrid is a breeze with the ability

Using free jqGrid 4.12.1, I aim to incorporate functionality for adding, editing, and deleting rows in the grid with server-side calls for each operation. Below is the implementation of editurl and 'actions' formatter, { name: "actions", wi ...

Leveraging HTML Page Variables in Google Tag Manager for Enhanced Merchant Code Integration

I'm currently in the process of incorporating Google Merchant Code via GTM on a product checkout/thank you page. The Google Merchant code is : <script> window.renderOptIn = function() { window.gapi.load('surveyoptin', function() { ...

Tips for dynamically populating a dropdown menu in Laravel with Ajax and JQuery

Hey pals, I'm encountering an issue with Ajax. Everything seems to be running smoothly when the page initially loads. However, once I hit the add button to insert a new row for a second entry, things start to go haywire. The functionality is perfect u ...

Having trouble connecting to the webserver? Make sure the web server is up and running, and that incoming HTTP requests are not being blocked by a firewall

While working on my Visual Studio 2013 Asp.Net web code using the Local IIS Web server Version 7 (Windows 7 x64) and Framework 4.0, I encountered an error message stating: "Unable to start debugging on the web server. Unable to connect to the webserver. V ...

Selecting ion-tabs causes the margin-top of scroll-content to be destroyed

Check out the Stackblitz Demo I'm encountering a major issue with the Navigation of Tabs. On my main page (without Tabs), there are simple buttons that pass different navparams to pre-select a specific tab. If you take a look at the demo and click t ...

What is the method for displaying the delete icon, a child component located within the Menu Item, upon hovering over it using Material UI CSS syntax?

My goal is to display the delete icon when hovering over a specific menu item that is being mapped using the map function. The desired functionality is for the delete icon to appear on the corresponding menu item when it is hovered over. I attempted to i ...

changing the elements' classes by using a carousel

Having trouble with a custom carousel and unable to use the standard Bootstrap carousel. This is how my code is structured: Images: <img src="1.img"/> <img src="2.img"/> <img src="3.img"/> Prev / Next buttons: <div class="left ...

Unveiling the Evasive Final Element in a JavaScript Array

Having a Javascript array named full_range: const range1 = _.range(1, 10, 0.5); const range2 = _.range(10, 100, 5); const range3 = _.range(100, 1000, 50); const range4 = _.range(1000, 10000, 500); const range5 = _.range(10000, 105000, 5000); const full_ran ...

Incorporate a 1-second delay for each value in the stream using Bacon.js

Here is my code snippet: var bulk = array[1,2,3,4] var finalResult = Bacon .fromArray(bulk) .flatMap(isValInCouchDb) .filter(onesThatExist) .flatMap(putValInCouchDb) I want to introduce a 1-second delay after the filter operation before e ...

Python Selenium - Handling StaleElementReferenceException

Currently, my attempt is to scrape multiple webpages from a site named iens. I have successfully scraped one page already. This is the code I have so far: chrome_path = '/Users/username/Downloads/chromedriver' driver = webdriver.Chrome(chrome_p ...

What is a more efficient method for switching between edit mode and view mode in ng-grid?

Up until now, I've only managed to switch the edit mode in ng-grid by using separate templates and showing the correct template based on user input. For example: Plunker (resize a column and then switch to another mode) This poses a problem because ...

What is the method for deactivating an option with multiple values that are separated by commas?

I am working with a unique situation where I have options that contain multiple values $('#addItemModal #servicesBlock select[name=service_id] option[value='+service.val()+']').prop('disabled', true); <script src="https: ...

Is it possible to transfer a massive number of files using node.js?

I need to asynchronously copy a large number of files, about 25000 in total. I am currently using the library found at this link: https://github.com/stephenmathieson/node-cp. Below is the code snippet I am using: for(var i = 0; i < 25000; i++ ...

Executing both Java and JavaScript code in the same form using JSP

Currently facing an issue where my form includes inputs for username and password, a captcha (<div>), and a submit button. Upon clicking the submit button, I want it to first check if the captcha is empty. If not, then proceed to call the Java code t ...