2

I use $routeProvider for 90%+ of my controllers, but am using ng-controller to attach controllers to angular-ui bootstrap html popover templates.

It works, but every controller I specify with ng-controller is called twice. None of the controllers specified in $routeProvider are called twice. The controllers being called twice are only referenced by ng-controller in the angularui bootstrap popover templates, and are not specified in $routeProvider. I have looked at:

AngularJs: controller is called twice by using $routeProvider

Angularjs: Controller is called multiple times

and many other solutions to the "controller called twice" problem on stackoverflow. None of the existing solutions have worked.

Is using $routeProvider while attaching controllers to DOM elements with ng-controller supported? If not, how should I restructure? It is not possible to use $routeProvider to define the popover templates' controllers since they have no URL for $routeProvider to intercept.

Here's the relevant code - from angular config:

$routeProvider
.when('/doc/:docId', {
  templateUrl: '/partials/doc/',
  controller: 'docCtrl',
})

The relevant href from /partials/doc/

<a href="#" popover-animation="false" popover-title="versions" popover-template="/partials/versions" popover-placement="bottom" class="btn right">Versions</a>

The angularui popover directive is:

angular.module( 'ui.bootstrap.popover', [ 'ui.bootstrap.tooltip' ] )
.directive( 'popoverPopup', function () {
  return {
    restrict: 'EA',
    replace: true,
    scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
    templateUrl: '/templates/popover/popover'
  };
})
.directive( 'popover', [ '$compile', '$timeout', '$parse', '$window', '$tooltip', function ( $compile, $timeout, $parse, $window, $tooltip ) {
  return $tooltip( 'popover', 'popover', 'click' );
}])

.directive( 'popoverTemplatePopup', function () {
  return {
    restrict: 'EA',
    replace: true,
    scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&', template: '@' },
    templateUrl: '/templates/popover/popover-template'
  };
})

.directive( 'popoverTemplate', [ '$tooltip', function ( $tooltip ) {
  return $tooltip( 'popoverTemplate', 'popover', 'click' );
}]);

Now, the /partials/versions template calls versionsCtrl:

<div ng-controller="versionsCtrl">
  <div class="versions_hover">
    <header>Versions</header>
  </div>
</div>

versionsCtrl only contains a console.log, and its called twice.

Community
  • 1
  • 1
max
  • 617
  • 8
  • 20
  • 6
    Can you post a sample code? – LostInComputer Jan 11 '14 at 04:29
  • Yes, just added relevant code. Thanks. – max Jan 12 '14 at 02:40
  • try setting up a http://plnkr.co/ if you can... I have not used angulars own router for a long time (using https://github.com/dotJEM/angular-routing)... But AFAIK there shouln't be any problems in what your doing. And I can't spot anything in the code that would give an idea. - Angular base plnkr: http://plnkr.co/edit/JA1c5Ec1bdckKw8pZ6z9?p=preview.... dotjem base plnkr: http://plnkr.co/edit/Li1Dtyf1z7YRyNZILBT6?p=preview – Jens Jan 21 '14 at 11:36

0 Answers0