问如何在路由配置中为模板使用控制器？
EN

Stack Overflow用户

提问于 2015-08-18 10:21:08

回答 4查看 48关注 0票数 0

我对角度不熟悉，所以如果术语不太正确，请对我好一点。我试图建立一个简单的网站，其中目前包括3页与控制器不同的网页，在不同的文件。

我有路由设置，我想在联系人页面上使用一个控制器，但是我一直收到以下错误：

Argument 'js/controllers/contact/ContactController.js' is not a function, got undefined

我有一个app.js文件，如下所示：

angular.module('simpleApp', ['ngRoute'])
  .config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/home/index.html'
      })
      .when('/about', {
        templateUrl: 'views/about/index.html'
      })
      .when('/contact', {
        templateUrl: 'views/contact/index.html',
        controller: 'js/controllers/contact/ContactController.js',
        controllerAs: 'contactCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  }]);

这是我在主index.html中的身体：

<body ng-app="simpleApp">
    <header>
      <div class="container">
        <div class="row">
          <div class="col-xs-6">
            <a href="/#/" class="logo">SimpleApp</a>
          </div>
          <nav class="main-menu" ng-controller="NavController as navCtrl">
            <ul class="list-unstyled list-inline">
              <li>
                <a href="/#/" class="main-menu__link" ng-class="{ 'main-menu__link--active': navCtrl.isActive('/')}">Home</a>
              </li>
              <li>
                <a href="/#/about" class="main-menu__link" ng-class="{ 'main-menu__link--active': navCtrl.isActive('/about')}">about</a>
              </li>
              <li>
                <a href="/#/contact" class="main-menu__link" ng-class="{ 'main-menu__link--active': navCtrl.isActive('/contact')}">Contact Us</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </header>
    <main>
      <div ng-view></div>
    </main>
    <footer>
      footer
    </footer>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script type="text/javascript" src="https://code.angularjs.org/1.4.4/angular-route.min.js"></script>

    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/controllers/shared/NavController.js"></script>
    <script type="text/javascript" src="js/controllers/contact/ContactController.js"></script>
  </body>

我不知道该怎么做才能解决这个问题，或者我做错了什么。

真的很感谢你提前提供帮助

angularjs

帕鲁一键部署教程

游戏联机服务器搭建等实践课程手把手教学，会用再买

回答 4

Stack Overflow用户

回答已采纳

发布于 2015-08-18 10:23:12

在我看来，所有的事情都是正确的，但是试着改变路线上的控制器：

controller: 'js/controllers/contact/ContactController.js',

对此：

 controller: 'ContactController',

票数 1

Stack Overflow用户

发布于 2015-08-18 10:33:18

在路由文件中，在控制器部分，您不必提供js引用，只需输入控制器名称即可。

因为一旦应用程序初始化，角知道它的所有控制器名称。所以你不必在任何地方提供进一步的参考资料。始终提供与启动文件相关的引用。

票数 1

Stack Overflow用户

发布于 2015-08-18 10:28:39

不使用控制器文件的路径。只需使用控制器的名称。就像您的控制器文件->js/控制器/ContactController.js一样

app.controller("ContactController", contactControllerFun);
contactControllerFun.$inject = ['$scope',....];
function contactControllerFun($scope, ....)
{
   //your controller code.....
}