Angular JS UI路由器共享控制器

Question

I want to give 2 parts of my UI the same controller but still let them have each of their own unique controllers.

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

So I want both content and sideMenu to share a controller. If I add a controller above the views then it requires a new template, I want to use the standard template instead of making a unique template for this state. Any ideas how I can get 3 controllers going in this example? Thanks.

Answer 1

I battled with this at some point in time, and I believe I made a template file that isn't directly accessible (via abstract: true). Here's an example...

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

In your tmpl/standard.html file, make sure this exists somewhere within the file:

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

Hope this points you in the right direction.