Angularjs: 使用 $routeProvider 和 ng-controller 同时进行操作

10 浏览
0 Comments

Angularjs: 使用 $routeProvider 和 ng-controller 同时进行操作

我在90%以上的控制器中使用$routeProvider，但是在angular-ui bootstrap的html弹出框模板中使用ng-controller来附加控制器。虽然这样可以工作，但是我指定的每个ng-controller控制器都会被调用两次。而在$routeProvider中指定的控制器只会被调用一次。这些被调用两次的控制器只被angular-ui bootstrap弹出框模板中的ng-controller引用，而在$routeProvider中没有指定。我已经查看了以下内容：

AngularJs: controller is called twice by using $routeProvider

Angularjs: Controller is called multiple times

以及stackoverflow上其他解决“控制器被调用两次”问题的解决方案。但是现有的解决方案都没有生效。

在使用ng-controller将控制器附加到DOM元素时，是否支持使用$routeProvider？如果不支持，应该如何重构？由于弹出框模板没有URL供$routeProvider拦截，因此无法使用$routeProvider来定义弹出框模板的控制器。

以下是相关代码 - 来自angular的配置：

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

来自/partials/doc/的相关href

Versions

angularui弹出框指令为：

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' );
}]);

现在，/partials/versions模板调用了versionsCtrl：

    
Versions

versionsCtrl只包含一个console.log，并且它被调用了两次。

0