2013-10-04 18 views
6

Z jakiegoś powodu mój kontroler jest podwójnie wywoływany, gdy przełączam się między zasobem 1 a zasobem2.Angularjs: Kontroler jest wywoływany wiele razy.

Oto kod:

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

Jeśli klikniesz pozycję 1, a następnie 2, zobaczysz, że „zasób o nazwie” drukowany jest 3 razy: 2 razy dla każdej zmiany pomiędzy zasobami.

Jakieś wskazówki, dlaczego tak się dzieje?

Odpowiedz

1

Działa to również w przypadku zmiany wersji kątowej 1.1.5

0

Nadal uczę się kanciastości i doświadczyłem tego problemu, kiedy napisałem dyrektywę i włączyłem kontrolerów.

Mam nadzieję, że komuś pomóc jak spędziłem trochę czasu, aby zobaczyć, co robiłam:

.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} 
    }) 
    .... 
Powiązane problemy