Angular JS UI路由器共享控制器

Question

我想為UI的2個部分提供相同的控制器，但仍然讓它們擁有各自的唯一控制器。

  $stateProvider
    .state('standard.page', {
      url: '/:page',
      resolve: {
        page: function($stateParams) {
          ...
        },
      },
      views: {
        'content': {
          templateUrl: '/tmpl/page',
          controller: 'controllercontent'
        },
        'sideMenu': {
          templateUrl: '/tmpl/menu',
          controller: 'controllermenu',
        }
      }
    })

因此，我希望content和sideMenu共享一個控制器。 如果我在視圖上方添加一個控制器，則它需要一個新模板，我想使用standard模板，而不是為此狀態創建唯一的模板。 在這個示例中，我如何獲得3個控制器的任何想法？ 謝謝。

Answer 1

我在某個時候對此進行了斗爭，我相信我制作了一個不能直接訪問的模板文件（通過abstract：true）。 這是一個例子

.state('standard', {
    url: '/standard',
    abstract: true,
    templateUrl: '/tmpl/standard.html',
    controller: 'SharedController'
    },
})

.state('standard.page', {
    url: '/:page',
    resolve: {
    page: function($stateParams) {
            ...
        },
    },
    views: {
        'content': {
                templateUrl: '/tmpl/page',
                controller: 'controllercontent'
            },
            'sideMenu': {
                templateUrl: '/tmpl/menu',
                controller: 'controllermenu',
            }
        }
});

在您的tmpl / standard.html文件中，確保該文件存在於文件中的某個位置：

<div ui-view="sideMenu">
<div ui-view="content">

希望這能為您指明正確的方向。