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.