声明2个控制器在单个页面中使用

Question

我想要使用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
        });

Answer 1

你可以尝试这样的事吗

<div ng-controller="FirstController">
    <p>Stuff ..</p>
</div>

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

Answer 2

您可以在单个页面中拥有多个控制器，但您不能拥有多个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>