Angularjs: контроллер называется несколько раз

По какой-то причине мой контроллер дважды вызывается, когда я переключаюсь между ресурсом 1 и ресурсом2.

Здесь код:

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

Если вы щелкните элемент 1, а затем 2, вы увидите, что "ресурс, называемый", печатается 3 раза: 2 раза для каждого изменения между ресурсами.

Любые подсказки, почему это происходит?

ОТВЕТЫ

Ответ 2

Это также работает, если вы переходите на angular версию 1.1.5

Ответ 3

Я все еще изучаю angular, и я столкнулся с этой проблемой, когда написал директиву и включил контроллеры.

Надеюсь, кто-то поможет, поскольку я потратил довольно много времени, чтобы посмотреть, что я сделал:

.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}
    })
  ....