javascript - 使用routeParams时，在一个页面上使用多个 Controller ？

Question

我在代码中使用routeParams 时遇到问题。

第一个版本(工作正常)

索引.html

<div ng-controller="NaomiController">
      <my-customer></my-customer>
    </div>
    <hr>
    <div ng-controller="IgorController">
      <my-customer></my-customer>
    </div>

我的controller.js是:

    angular.module('docsScopeProblemExample', [])
    .controller('NaomiController', ['$scope', function($scope) {
      $scope.customer = {
        name: 'Naomi',
        address: '1600 Amphitheatre'
id:'na'
      };
    }])
    .controller('IgorController', ['$scope', function($scope) {
      $scope.customer = {

        name: 'Igor',
        address: '123 Somewhere'
id:'ig'
      };
    }])
    .directive('myCustomer', function() {
      return {
        restrict: 'E',
        templateUrl: 'my-customer.html'
      };
    });

和我的

my-customer.html 是:

Name:<a href="{{customer.id}}">{{customer.name}}</a> , Address: {{customer.address}}

之后我想在下一页使用routeParams..

代码的第二个版本(不起作用)

所以index.html是:

<div ng-view></div>

app.js 是:

var App = angular.module('App', [
  'ngRoute',
  'myControllers'
]);

App.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        template: 'home.html',
        controller: 'IgorController','NaomiController'
      }).
      when('/home/:id', {
        templateUrl: 'partials/detail.html',
        controller: 'detailCtrl'
      }).
      otherwise({
        redirectTo: '/home'
      });
  }]);

我的controller.js是:

    myControllers.controller('NaomiController', ['$scope', function($scope) {
              $scope.customer = {
                name: 'Naomi',
                address: '1600 Amphitheatre'
        id:'na'
              };
            }])
            .controller('IgorController', ['$scope', function($scope) {
              $scope.customer = {

                name: 'Igor',
                address: '123 Somewhere'
        id:'ig'
              };
            }])
            .directive('myCustomer', function() {
              return {
                restrict: 'E',
                templateUrl: 'my-customer.html'
              };
            }).controller('detailCtrl',['$scope', function($scope){
             $scope.message: "Hello"
}])

其中 home.html 包含:

<div ng-controller="NaomiController">
          <my-customer></my-customer>
        </div>
        <hr>
        <div ng-controller="IgorController">
          <my-customer></my-customer>
        </div>

和detail.html有:

{{message}}

我的代码的第二个版本无法正常工作

Answer 1

您只能对 $routeProvider 使用单个 Controller

您可以做的是为您的 View 使用单个 Controller ，并将 View HTML 本身中的 2 个 Controller 与 ng-controller 关联起来