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">

希望这能为您指明正确的方向。