AngularJS: Preventing controllers from registering multiple times while changing states using UI Router

Question

AngularJS: Preventing controllers from registering multiple times while changing states using UI Router

After injecting HTML with a ui-view into the DOM and changing state using ui.router, I noticed that the controller gets registered multiple times whenever the state is changed. This results in the code executing multiple times, as demonstrated in the Plunker link below. Simply open the console and click back and forth between the left and right buttons to see the controllers executing an additional time for each click.

The issue only occurs when the ui-views are injected into the DOM, not when they live on the index.html as static content.

var app = angular.module('app', ["ui.router", "appHome", "appOther"]).config([
             "$urlRouterProvider", "$stateProvider", "$locationProvider", 
    function ($urlRouterProvider,   $stateProvider,   $locationProvider) {

        $stateProvider.state('appHome', {
            url: '/home/index',
            views: {
                "Alerts": {
                    template: 'THINGS',
                    controller: "AlertsController as Alerts",
                }
            }
        }).state('appOther', {
            url: '/other/index',
            views: {
                "Other": {
                    template: 'THINGS',
                    controller: "OtherController as Other",
                }
            }
        });

    }
]);

Check out the testcase on Plunker here: http://plnkr.co/edit/M2wzVLSSgZ7naOi58qgL

javascript angularjs angular-ui-router

Answer 1

Answer №1

Almost at your destination. I am not criticizing or questioning this method, just offering a solution. Take a look at this live example.

You've successfully established a new scope. Well done. However, that is only part A. The crucial piece B is missing. B - the opposite of A === destroying the old scope (once finished).

This code snippet will help accomplish the task:

 app.controller('MenuController', ["$scope","$compile", "$state","$http",
    function MenuController($scope,$compile, $state, $http) {
        $scope.goToUrl = function (view) {

                // was scope previously created
                var hasPreviousChildScope = this.childScope !== void 0
                                         && this.childScope !== null;

                if(hasPreviousChildScope)
                {
                  // we must clear after ourselves
                  this.childScope.$destroy();
                  this.childScope = null;
                }

                // create new scope
                this.childScope = $scope.$new();

                var html;
                var state;
                if(view == 'Alerts'){
                  view = '<div ui-view="Alerts"></div>';
                  state  = 'appHome'
                }
                else{
                  view = '<div ui-view="Other"></div>';
                  state  = 'appOther'
                }
                $('#test').html($compile(view)(this.childScope));
                $state.go(state);

        };
    }
]);

See it all in action here

Answer 2

Almost at your destination. I am not criticizing or questioning this method, just offering a solution. Take a look at this live example.

You've successfully established a new scope. Well done. However, that is only part A. The crucial piece B is missing. B - the opposite of A === destroying the old scope (once finished).

This code snippet will help accomplish the task:

 app.controller('MenuController', ["$scope","$compile", "$state","$http",
    function MenuController($scope,$compile, $state, $http) {
        $scope.goToUrl = function (view) {

                // was scope previously created
                var hasPreviousChildScope = this.childScope !== void 0
                                         && this.childScope !== null;

                if(hasPreviousChildScope)
                {
                  // we must clear after ourselves
                  this.childScope.$destroy();
                  this.childScope = null;
                }

                // create new scope
                this.childScope = $scope.$new();

                var html;
                var state;
                if(view == 'Alerts'){
                  view = '<div ui-view="Alerts"></div>';
                  state  = 'appHome'
                }
                else{
                  view = '<div ui-view="Other"></div>';
                  state  = 'appOther'
                }
                $('#test').html($compile(view)(this.childScope));
                $state.go(state);

        };
    }
]);

See it all in action here

Answer 3

Answer №2

Why make things so complex? Is there a particular reason for utilizing this approach?

if(view == 'Alerts'){
   view = '<div ui-view="Alerts"></div>';
   state  = 'appHome'
}
else{
   view = '<div ui-view="Other"></div>';
   state  = 'appOther'
   }

$('#test').html($compile(view)(scope));
$state.go(state);

Isn't there an easier way to achieve the same result, like:

<div ng-controller="MenuController">
   <button ui-sref="appHome" value="Click Me">GoTo Alerts</button>
   <button ui-sref="appOther" value="Click Me">GoTo Other</button>
</div>
<section ui-view></section>

I utilized ui-sref for seamless state navigation. I've created a demo to showcase this. Take a look here. Would that simplify things for you? Is it practical? With this, you might not even need the menuController.

If you require multiple named views (nested views), refer to the documentation. It's well-explained. You could end up with something like:

<!-- index.html -->
<body>
  <div ui-view="alerts"></div>
  <div ui-view="other"></div>
</body>

$stateProvider
  .state('report', {
    views: {
      'alerts': { ... templates and/or controllers ... },
      'other': {},
    }
  })

Answer 4

Why make things so complex? Is there a particular reason for utilizing this approach?

if(view == 'Alerts'){
   view = '<div ui-view="Alerts"></div>';
   state  = 'appHome'
}
else{
   view = '<div ui-view="Other"></div>';
   state  = 'appOther'
   }

$('#test').html($compile(view)(scope));
$state.go(state);

Isn't there an easier way to achieve the same result, like:

<div ng-controller="MenuController">
   <button ui-sref="appHome" value="Click Me">GoTo Alerts</button>
   <button ui-sref="appOther" value="Click Me">GoTo Other</button>
</div>
<section ui-view></section>

I utilized ui-sref for seamless state navigation. I've created a demo to showcase this. Take a look here. Would that simplify things for you? Is it practical? With this, you might not even need the menuController.

If you require multiple named views (nested views), refer to the documentation. It's well-explained. You could end up with something like:

<!-- index.html -->
<body>
  <div ui-view="alerts"></div>
  <div ui-view="other"></div>
</body>

$stateProvider
  .state('report', {
    views: {
      'alerts': { ... templates and/or controllers ... },
      'other': {},
    }
  })

AngularJS: Preventing controllers from registering multiple times while changing states using UI Router

Answer №1

Answer №2

Similar questions

When using ng-repeat with directives, only the final element will react to resize events

Only a single button stands between two choices

I'm struggling to make this background show up in a div

Execute a PHP SQL query when a link is clicked

Creating dynamic data for Chart.js to display values

Exploring the functionality of uiRouter using the requirejs framework

Retrieve the structure from a React application

Retrieve the values and IDs for every span element within the form

The Three.js environment experiences lag and a decrease in performance

What is the method for deactivating an underlying element to prevent it from being clicked on?

What is the method for altering the appearance of grid columns with javascript?

Achieving a multiline ellipsis (clamp) across various levels of HTML tags, compatible with popular browsers like IE and Firefox

Printing a list of values from a C# page to the presentation layer (ASPX)

Using EMCC and WASM on the web, what is the best way to utilize a C function?

Cannot use React's setState function

Acquire feedback from PHP using SweetAlert notifications

Exploring the intricacies of Bower and enhancing dependency management

Utilizing either jQuery or Angular, implement a function that adds line breaks after every x characters within

What mistake am I making with arrays?

What does the curly braces {} signify in the JavaScript programming language