Angularjs: Controller is called multiple times

Question

For some reason, my controller is double called, when I switch between resource 1 and resource2.

Here's the code:

index.html

<!DOCTYPE html>
<html ng-app="multiple_calls">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <a href="#res/1">1</a>
    <a href="#res/2">2</a>

    <div ng-view>
    </div>
  </body>

</html>

app.js

var app = angular.module('multiple_calls', []);

app.
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/res/:id', {templateUrl: 'res.html',
                        controller: 'res'
      });
}]);


app.controller('MainCtrl', function($scope) {
});

app.controller('res', function($scope, $routeParams) {
  console.log('resource called')
  $scope.id = $routeParams.id;
});

res.html

{{id}}

http://plnkr.co/edit/HsCJmbllOcnlvlc1oiHa?p=preview

If you click item 1 and then 2, you'll see that "resource called" is printed 3 times: 2 times for each change between resources.

Any clues why this happens?

Community · Accepted Answer · 2017-05-23 12:24:51Z

14

Found an exact same question:

AngularJs: controller is called twice by using $routeProvider

The solution is to add "/" at the end of router url:

-      when('/res/:id',
+      when('/res/:id/',

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Oct 4, 2013 at 9:39

Vanuan

33.8k11 gold badges103 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Simon Arsenault Over a year ago

This also fixed my problem. However, I'm defining my routes with $stateProvider.

Chandermani · Accepted Answer · 2013-10-04 09:40:47Z

1

This also works if you change to angular version 1.1.5

answered Oct 4, 2013 at 9:40

Chandermani

42.7k12 gold badges87 silver badges89 bronze badges

Comments

Angel M. · Accepted Answer · 2016-07-02 06:03:17Z

I'm still learning angular and I have experienced this problem, when I wrote the directive and included controllers.

I hope will help someone as I spent quite some time to see what I did:

.directive("list", function() {
  return {
    restrict: "E",
    transclude: true,
    replace: false,
    templateUrl: "contacts/list",
    controller: "CMSController", //- not needed at all
    controllerAs: 'cCtrl'//- not needed at all
  };
})

function config($routeProvider, $locationProvider, $httpProvider) {
  $routeProvider
   ....
    .when('/CMS', {
      templateUrl: 'contacts/index',
      controller: 'CMSController',
      controllerAs: 'cCtrl',
      access: {restricted: true}
    })
  ....

Paridokht · Accepted Answer · 2018-11-14 13:40:24Z

one another solution which worked for me is that if you defined a directive, try not set its controller to the one which is calling multiple times, just add the directive to your app by using app.directive.

    app.directive('myDirective',[ '$window', function ($window) {
    function link(scope, element) {
           // stuff
        });
    };

    return {
      restrict: 'A',
      scope: {offset: "@"},
      link: link,
      // controller: myCtrl //myCtrl was called multiple I comment this line
    };
  }]);

Collectives™ on Stack Overflow

Angularjs: Controller is called multiple times

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Linked

Related