javascript - Angular js ui-router共享 Controller

Question

我想为我的 UI 的两个部分提供相同的 Controller ，但仍然让它们各自拥有自己独特的 Controller 。

  $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 共享一个 Controller 。如果我在 View 上方添加一个 Controller ，那么它需要一个新模板，我想使用 standard 模板而不是为此状态创建一个唯一的模板。有什么想法可以让 3 个 Controller 在这个例子中运行吗？谢谢。

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

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