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=".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}}
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?
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?
Share Improve this question asked Oct 4, 2013 at 9:27 VanuanVanuan 33.4k11 gold badges101 silver badges104 bronze badges4 Answers
Reset to default 14Found 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/',
This also works if you change to angular version 1.1.5
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}
})
....
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
};
}]);