Double trouble: Angular JS controller triggered twice (ng-controller)

While developing my ionic application, I encountered an issue with my Angular login controller being called twice. Despite searching for solutions to similar problems, I haven't been able to find a fix.

Even after removing

ng-controller="LoginCtrl as lgnCtrl"
, the controller is still called once but without two-way data binding.

Below is my route file:

$stateProvider
.state('login', {
  url: "/login",
  views: {
    'main': {
      templateUrl: "app/user/loginView.html",
      controller: "LoginCtrl",
      controllerAs: "lgnCtrl"
    }
  }
})

$urlRouterProvider.otherwise('/login');

Here is my controller:

angular.module('starter.controllers')
.controller('LoginCtrl', LoginCtrl);

function LoginCtrl($state, $storage, $translate, $ionicPopup, LoginService, messageService) {
    var lgnCtrl = this;
    console.log("user dash 1zz");
    return lgnCtrl;
}

And here are my views:

loginView.html:
<ion-view view-title="loginView" id="signinBlk">
   <ion-content>
       <div class="list list col span_1_of_2 "  ng-controller="LoginCtrl as lgnCtrl">
   </div>
   </ion-content>
</ion-view>
index.html:
<body ng-app="starter">
  <ion-nav-view name="main"></ion-nav-view>
</body>

Answer №1

When you have defined your controller in the route, there is no need to also define it in the HTML template. Remove the ng-controller attribute with its value from the HTML template and then run it – it will only run once.

Answer №2

Instead of including the directive

ng-controller="LoginCtrl as lgnCtrl"
in the HTML markup, it is recommended to define the controller within the route configuration. For instance, the route setup in the controller would look something like this:

$routeProvider
        .when("/", { templateUrl: "views/abc.html", controller: "LoginCtrl as lgnCtrl", caseInsensitiveMatch: true });

This approach proved to be very effective, as the functions within the controller were only executed once, resulting in better performance.

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

Upon sending a post request with Dojo.request.post, the returned promise indicates "rejected", despite the server successfully processing the request

I have been attempting to enhance an ArcGIS feature service using the Arcgis JavaScript API and dojo/request. I have followed guidance on how to include the request module, as indicated in this link. While I am able to receive a response from the server, I ...

exploring ajax functionality in jQuery with JavaScript

I am looking to send a JavaScript variable to another PHP file and I believe using Ajax might be the solution. My goal is to retrieve data from another PHP file using the "post" method. However, when I try to use $.ajax({}) directly within JavaScript, I en ...

Issue with utilizing display: table and overflow: hidden in Internet Explorer and Firefox, functioning properly on Webkit and Blink

JSFiddle : http://jsfiddle.net/h7xvr2t9/2/ I have been experimenting with ways to achieve some effects: Animating a hidden DIV to slide into view from below a visible container Centering text/image on a link to trigger the animation HTML <div clas ...

How can I prevent my JSON object from serializing .NET nulls as "null" for object members?

I am currently utilizing WebMethods to retrieve an array of a custom class. When this array is returned from a Jquery .ajax call, it gets serialized into a JSON object that can be utilized with Javascript in my ASP.NET application. The issue I am facing is ...

Issue: Unable to assign type 'FormDataEntryValue' to type 'string'. Type 'File' cannot be assigned to type 'string'

After retrieving data from the formData, I need to pass it to a function for sending an email. Error: The error message states that 'FormDataEntryValue' is not compatible with type 'string | null'.ts(2322) definitions.ts(119, 3): The e ...

Running cy.task after all test suites can be done by adding the task in a

I need some guidance on running cy.task after executing all test suites. I have a file generated at the start of the tests that I would like to remove once they are completed. Regardless of whether any tests passed or failed, I want to trigger cy.task im ...

Guide: Creating an AngularJS directive for displaying a jQuery dialog that triggers submission on pressing the Enter button

Looking to create a similar functionality to the jQuery modal form Dialog in my AngularJS app to collect the username from the user. I've tried using the twitter-bootstrap modal and AngularUI dialog, but both are lacking in two key areas: Auto-focu ...

Make sure to verify if the mode in Angular is either visible-print or hidden-print

Here is a snippet of code <div class="row"> <div class="col-sm-12 visible-print"> Content (display in full width when printed) </div> <div class="col-sm-6 hidden-print"> Content (same as above but only half width when ...

group and display table data of objects in an array using javascript

To achieve the desired table display, I have created a custom component called envTableComponent. This component iterates through the envResponse data and showcases the project name alongside the build information. https://i.sstatic.net/tAQdZ.png export c ...

Implementing Google Apps Script code on my webpages

I am currently in the process of developing a web application using HTML, CSS, and JavaScript with Google Spreadsheet serving as my database. To turn this web app into a fully functional application, I am considering utilizing PhoneGap. After successfully ...

OpenLayers' circular frames surrounding the icons

I am currently using openlayers and trying to implement a feature that creates a circle around the icons on the map. I have been referring to this example on Stack Overflow but unable to draw the circle successfully. Can someone please assist me with this? ...

Styling Angular Datatables with CSS

i have data on the front end https://i.stack.imgur.com/2xq7a.jpg i need all check marks to be displayed in green color. Below is the code snippet: $scope.dtColumnsCal= [ DTColumnBuilder.newColumn('name').withTitle('Name') ...

Support for Vue 3.4 same-name shorthand has been added to VS Code

After upgrading my Vue 3 project to version 3.4, I encountered an issue with vs-code highlighting same-name shorthand as an error, even though it was functioning correctly in my code. I am using the volar extension. Is there a way to resolve this so that v ...

Unusual AngularJS Service Function Styling

I previously inquired about a similar issue, but unfortunately did not receive any correct answers. The query pertains to the service function in AngularJS. Interestingly, when I defined an AngularJS service using the service function in an unconventional ...

"Manipulating Arrays in JavaScript: Adding an Item at a Specific

I can easily insert into an array at a specific index when that index already exists. For example, if we have arr = [1, 2, 3, 4] and execute arr.splice(2, 0, 0), the result will be [1, 2, 0, 3, 4]. But what if I have an empty array that needs to be filled ...

Unable to maintain checkbox state after page reload in React

I am currently working on creating a to-do list application using React and Material UI. Everything is functioning well except for the checkbox state. I am storing each to-do as an object in an array called todoList in local storage, like this: todoList i ...

AngularJS slash after the hashbang character is being encoded

I've set up my AngularJS locationProvider to utilize html5 (with fallbacks in hashbangs) $locationProvider.html5Mode(true).hashPrefix('!') However, I'm encountering an issue where if I visit, for instance, http://locahost/#!/pathh/sub ...

Dynamically transferring data from PHP to JavaScript in dynamically generated HTML elements

I have a collection of entities retrieved from a database, each entity containing its own unique GUID. I am showcasing them on a webpage (HTML) by cycling through the entities array and placing each one within a new dynamically generated div element. < ...

Attempting to retrieve the numerical value displayed on my range slider. (using Bootstrap 4 and JavaScript)

var slider = new Slider('#slider1',{ tooltip: 'always' }); //generate a password function passwordGenerator () { // how long is the password going to be? var passwordLength = document.getElementById('slider1').value; ...

Tips for concealing a component in the DOM using ng-if in angular.js and angularmaterial:

Currently, I'm utilizing angular.js 1.5 along with angular material on the frontend to populate the DOM with objects retrieved from the Database. Within one of the repeaters, I am facing an issue where I need to determine if an object is already prese ...