2013-10-04 7 views
6

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

Вот код:

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 раза для каждого изменения между ресурсами.

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

ответ

11

Найдено точное же вопрос:

AngularJs: controller is called twice by using $routeProvider

Решение добавить «/» в конце маршрутизатора URL:

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

Это также фиксированная моя проблема. Тем не менее, я определяю свои маршруты с помощью '$ stateProvider'. –

1

Это также работает, если вы смените угловой версии 1.1.5

0

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

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

.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} 
    }) 
    .... 
Смежные вопросы