如何在Angular JS路由中向一个视图添加多个控制器

Question

例如，在这个官方教程中，只有一个控制器PhoneListCtrl被分配给视图/手机。如果我有多个控制器用于此视图怎么办？

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
      }).

提前致谢！

Answer 1

有很多方法可以解决这个问题。

• 您可以在视图中使用ng-controller指令：

      

  <div ng-controller="someOtherController">
      <input ng-model="propertyOfSomeOtherControllersScope" />
  </div>
  

  • 您可以使用angular-ui团队ui-router module。简而言之，这允许您在单个＆＃34;状态＆＃34;中具有多个命名视图，这些视图就像它们的＆＃34;路由＆＃34;一样。在这里完全描述它的方式太多了，但它几乎适用于任何项目。

  • 这与第一个解决方案相同，但您可以使用ng-include来包含另一个显式声明其控制器的部分。基本上，在您的主文件中：<div ng-include="'file2.html'"></div>和file2.html：<div ng-controller="someOtherController"></div>。

这三件事只是想到了，肯定有其他方法可以解决这个问题。在某些情况下，您可能需要一个指令而不是单个视图中的另一个控制器。希望这能让你开始朝着正确的方向前进。