Javascript 将多个控制器路由到同一视图和href

我有一个页面，当用户单击retrieve total data链接时，我希望加载三个控制器，我希望total data视图加载三个控制器。 到目前为止，我已经做了以下工作。但它只加载一个控制器。 HTML

控制者：

   myApp.controller('TotalUserCtrl', function($scope,$http) {

   $http.get('http://94.125.132.253:8001/gettotalusers').success(function (data) {

   $scope.users = data;
   console.log(data);
    }

     )});  //Total coolios

     myApp.controller('TotalCoolioCtrl', function($scope,$http) {
     $http.get('http://94.125.132.253:8001/gettotalcoolios').success(function (data) {
   $scope.coolios = data;
  console.log(data);
  }
  )}); 
  //Total coolios
  myApp.controller('TotalplacesCtrl', function($scope,$http) {

 $http.get('http://94.125.132.253:8001/gettotalplaces').success(function (data) {
 $scope.places = data;
 console.log(data);
  }
  )}); 

---

我怎样才能修好它？我是个新手。但这就是我到目前为止所做的。

在这种情况下，当每个定义覆盖最后一个定义时，只有最后一个路由处理程序才会触发。我可以考虑几个备选方案-使用和使用嵌套状态，或者直接在要使用该控制器渲染的每个元素上指定控制器。。。例如

Javascript

var app = angular.module('plunker', ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/total', {
        templateUrl: 'test.html',
        controller: 'TotalCtrl'
    });
}])
.controller('TotalCtrl', function($scope) {
})
.controller('TotalPlacesCtrl', function($scope) {
    $scope.places = {
        places: 24
    };
})
.controller('TotalUsersCtrl', function($scope) {
    $scope.users = {
        users: 55
    };
})
.controller('TotalCooliosCtrl', function($scope) {
    $scope.coolios = {
        coolios: 18
    };
});

**模板**

<script type="text/ng-template" id="test.html">
  <h1 ng-controller="TotalPlacesCtrl">Total Places: {{places.places}}</h1>
  <h1 ng-controller="TotalUsersCtrl">Total Users: {{users.users}}</h1>
  <h1 ng-controller="TotalCooliosCtrl">Total Coolios: {{coolios.coolios}}</h1>
</script>

总学额：{{Places.Places}
用户总数：{{Users.Users}
总Coolios:{{Coolios.Coolios}}

---

也是为了演示。

那么这会实现我想要的功能吗？这和UI路由器有什么区别？UI路由器是基于状态工作的，而不仅仅限于路由。有进一步的细节。只有你才能决定这是否符合你的要求——我相信这是根据你的问题来决定的。你试过Plunker了吗？是的，我已经实现了它，它可以工作了，我只是担心如果从长远来看这会影响任何事情。不应该这样做，这是他们在Angular文档中演示它的方式-查看位于的关联控制器和Angular Scope对象部分。好的，谢谢，还有一个问题，我有类似的情况，但是我请求的是按日期的数据，用户输入日期并按下fetch，我将所有三个控制器链接到同一个表单，因此当按下一个fetch时，它将从三个控制器执行所有函数，其中fetch（）出现在所有三个函数中，我如何解决这个问题。

var app = angular.module('plunker', ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/total', {
        templateUrl: 'test.html',
        controller: 'TotalCtrl'
    });
}])
.controller('TotalCtrl', function($scope) {
})
.controller('TotalPlacesCtrl', function($scope) {
    $scope.places = {
        places: 24
    };
})
.controller('TotalUsersCtrl', function($scope) {
    $scope.users = {
        users: 55
    };
})
.controller('TotalCooliosCtrl', function($scope) {
    $scope.coolios = {
        coolios: 18
    };
});

<script type="text/ng-template" id="test.html">
  <h1 ng-controller="TotalPlacesCtrl">Total Places: {{places.places}}</h1>
  <h1 ng-controller="TotalUsersCtrl">Total Users: {{users.users}}</h1>
  <h1 ng-controller="TotalCooliosCtrl">Total Coolios: {{coolios.coolios}}</h1>
</script>