Partial controller get called twice due to ng-view

7,651 views
Skip to first unread message

Bretto

unread,
Aug 25, 2012, 1:39:11 AM8/25/12
to ang...@googlegroups.com
Is there a way around this ? the ng-view is calling the constructor twice every time you load a new partial...

Pawel Kozlowski

unread,
Aug 25, 2012, 4:36:29 AM8/25/12
to ang...@googlegroups.com
Hi Bretto!

The problem in your jsFiddle was that you were using link like this:

<a href="#appOne">App One</a>

while it should be (in non-html5 mode):

<a href="#/appOne">App One</a> (please note /)

What was happening was doing a redirect from urls that were not
slash-prefixed to the slash-prefixed ones and be doing so routes were
matched 2-times and the corresponding controller invoked twice as
well. It is described in the dev guide for the $location service
(http://docs.angularjs.org/guide/dev_guide.services.$location):

"A path should always begin with forward slash (/); the
$location.path() setter will add the forward slash if it is missing."

Finally here is the working jsFiddle: http://jsfiddle.net/f8yGb/3/

Hope this helps,
Pawel
> --
> You received this message because you are subscribed to the Google Groups
> "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to
> angular+u...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en.
>
>

Bretto

unread,
Aug 26, 2012, 12:43:00 AM8/26/12
to ang...@googlegroups.com
Excellent thank you very much :)

Luther Goh Lu Feng

unread,
Jan 4, 2013, 5:15:33 AM1/4/13
to ang...@googlegroups.com
Sorry for bumping this thread. But I think I have a similar if not related problem of the controller getting called twice due to ng-view when matched to a corresponding route.

The issue can be reproduced with the following short code snippets of 4 files. Pardon me for not using plnkr.co. I have problems with the site and have already filed a bug report for that. I would have love to use jsfiddle but I believe it does not support multiple files. I have tested this on Chrome. 

Would love to hear if someone can confirm my findings, indicated by firing of console.log('test'); twice when clicking 'App One Link'

// index.html
<!DOCTYPE html>
<html>

  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
  </head>
  <script src="app.js"></script>

  <body>   
    <div ng-app="myApp">

      
          <a href="home.html">Home Link</a> |
          <a href="partial1.html">App One Link</a> |
    
      
          <div ng-view></div>
    </div>

  </body>
  
</html>

// app.js
var myApp = angular.module('myApp',[]).config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/',{templateUrl:'home.html'})
.when('/partial1.html',{templateUrl:'partial1.html',controller:'oneCtrl'})
.otherwise({redirectTo:'/'});
// Set HTML5 Mode for routes
$locationProvider.html5Mode(true);
});
function oneCtrl($scope) {
console.log('test');
$scope.name = 'World';
}

// home.html 

<div>This is the home partial</div>

// partial1.html

<div ng-controller="oneCtrl">This is partial 1</div>

dlo...@googlemail.com

unread,
Jan 4, 2013, 7:52:14 AM1/4/13
to ang...@googlegroups.com
You make a simple mistake:

.when('/partial1.html',{templateUrl:'partial1.html',controller:'oneCtrl'})

<div ng-controller="oneCtrl">This is partial 1</div>

Your routeProvider starts the controller once with this template, and once again in these template. :)

Luther Goh Lu Feng

unread,
Jan 4, 2013, 8:08:35 AM1/4/13
to ang...@googlegroups.com
Ah ok thanks for the tip!So are both the following equivalent? Is one implementation better than the other?


.when('/partial1.html',{templateUrl:'partial1.html'})

<div ng-controller="oneCtrl">This is partial 1</div>

================


.when('/partial1.html',{templateUrl:'partial1.html',controller:'oneCtrl'})

<div>This is partial 1</div>


>________________________________
> From: "dlo...@googlemail.com" <dlo...@googlemail.com>
>To: ang...@googlegroups.com
>Sent: Friday, January 4, 2013 8:52 PM
>Subject: [AngularJS] Re: Partial controller get called twice due to ng-view

--
>You received this message because you are subscribed to the Google Groups "AngularJS" group.
>To post to this group, send email to ang...@googlegroups.com.
>To unsubscribe from this group, send email to angular+u...@googlegroups.com.

>Visit this group at http://groups.google.com/group/angular?hl=en-US.
> 
> 
>
>
>

Pawel Kozlowski

unread,
Jan 4, 2013, 8:12:35 AM1/4/13
to ang...@googlegroups.com
Hi!

On Fri, Jan 4, 2013 at 2:08 PM, Luther Goh Lu Feng <elf...@yahoo.com> wrote:
> are both the following equivalent? Is one implementation better than the other?

No, those are not equivalent.
Controllers defined on a route level can be injected with objects from
the resolve section of a route.

In general you should define controllers on a route level if those
controllers are supposed to manage partials referenced in the
templateUrl.

Cheers,
Pawel

--
Question? Send a fiddle
(http://jsfiddle.net/pkozlowski_opensource/Q2NpJ/) or a plunk
(http://plnkr.co/)
Need help with jsFiddle? Check this:
http://pkozlowskios.wordpress.com/2012/08/12/using-jsfiddle-with-angularjs/

Looking for UI widget library for AngularJS? Here you go:
http://angular-ui.github.com/
Reply all
Reply to author
Forward
0 new messages