宣布2个控制器在一个页面中使用

我有2个控制器,我想要使用。 其中之一是ModalDemoCtrl和另一个是ReportController。 我如何声明两个控制器共享相同的状态,url和templateUrl?

app.js

angular .module('app', [ 'ui.router', 'lbServices', 'ngAnimate', 'ui.bootstrap' ]) .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $stateProvider .state('report', { url: '/report', templateUrl: 'views/report.html', controller: 'ModalDemoCtrl', authenticate: true }) .state('report', { url: '/report', templateUrl: 'views/report.html', controller: 'ReportController', authenticate: true }); 

你可以尝试这样的事情吗?

 <div ng-controller="FirstController"> <p>Stuff ..</p> </div> <div class="menu" ng-controller="SecondController"> <p>Other stuff ...</p> </div> 

你可以在单个页面上有多个控制器,但是你不能有多个ng-app。 然后定义这个模块并定义这个模块中的所有控制器:

 //app.js var app = angular.module('app', ['ui.router']); app.config(['$stateProvider','$urlRouterProvider', function($stateProvider,$urlRouterProvider) { $urlRouterProvider.otherwise("/"); $stateProvider. state('report', { url:'/report', templateUrl: 'views/report.html' }) }]); app.controller('ModalDemoCtrl', function($scope) { $scope.message = 'This is ModalDemoCtrl'; }); app.controller('ReportController', function($scope) { $scope.message = 'This is ReportController'; }); //report.html <div class="container"> //ModalDemoCtrl <div ng-controller = 'ModalDemoCtrl'> {{ message }} </div> //ReportController <div ng-controller = 'ReportController'> {{ message }} </div> </div>