Question

我正在使用CakePHP和AngularJS。我目前遇到的问题是我的AngularJS路线没有加载我的部分。有没有人有任何关于在哪里看的想法？这是我的路线代码：

csppmApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/users', {
        templateUrl: 'partials/user-list.html',
        controller: 'UserCtrl'
      }).
      otherwise({
        redirectTo: '/users'
      });
  }]);

我的控制员：

var csppmControllers = angular.module('csppmControllers', []);

csppmControllers.controller('UserCtrl', ['$scope', '$routeParams','User',
  function($scope, $routeParams, User) {
    /*$scope.moduleState = 'list';*/
    $scope.users = ['jim','bob','same'];
    $scope.sam = 'test';
    /*
    $scope.showDetail = function (user) {
      $scope.selectedUser = user;
      $scope.moduleState = 'details';
    }
    */
  }]);

我的default.ctp的代码：

<?php
/**
 *
 *
 * CakePHP(tm) : Rapid Development Framework (http://cakephp.org)
 * Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org)
 *
 * Licensed under The MIT License
 * For full copyright and license information, please see the LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @copyright     Copyright (c) Cake Software Foundation, Inc. (http://cakefoundation.org)
 * @link          http://cakephp.org CakePHP(tm) Project
 * @package       app.View.Layouts
 * @since         CakePHP(tm) v 0.10.0.1076
 * @license       http://www.opensource.org/licenses/mit-license.php MIT License
 */

$cakeDescription = __d('cake_dev', 'CakePHP: the rapid development php framework');
?>
<!DOCTYPE html>
<html lang="en" ng-app="csppmApp">
<head>
    <?php echo $this->Html->charset() . "\n"; ?>
    <title><?php echo $title_for_layout; ?></title>
    <?php
        echo $this->Html->meta('icon') . "\n";

        //echo $this->Html->css('cake.generic');
    ?>
    <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <?php   
        echo $this->fetch('meta');
        echo $this->fetch('css');
    ?>
    <!-- Font Awesome -->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <!-- jQuery 1.10.2 -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!-- AngularJS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
    <!-- Bootstrap 3.0.3 -->
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <?php
        echo $this->fetch('script') . "\n";
        echo $this->Html->script('lib/angular/angular-route') . "\n"; 
        echo $this->Html->script('app') . "\n"; 
        echo $this->Html->script( 'controllers' ) . "\n";

        //echo $this->Html->script('animations') . "\n"; 

        //echo $this->Html->script( 'filters' ) . "\n";
        //echo $this->Html->script( 'services' ) . "\n";
    ?>

    <script type="text/javascript">
    /*$(document).ready(function() {
        $('.tree-toggle').click(function () {
            $(this).parent().children('ul.tree').toggle(200);
        });
    });*/
    </script>
    <style>
    .well ul > li ul { display: none; }
    </style>
</head>
<body>
    <div class="container" id="container">
        <div class="row" id="header">
            <h1></h1>
        </div>
        <nav class="col-lg-12 navbar navbar-default" role="navigation">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">CSP Solutions</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Actions <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Corporate Website</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Logout</a></li>
                </ul>
              </li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </nav>
        <?php echo $this->element( 'sidebar' ); //show sidebar ?>
        <div ng-view class="view-frame col-lg-9" id="content">
            Nothing here: {{ 1+ 1}} {{sam}}
        </div>
        <div class="row" id="footer">
            <?php echo $this->Html->link(
                    $this->Html->image('cake.power.gif', array('alt' => $cakeDescription, 'border' => '0')),
                    'http://www.cakephp.org/',
                    array('target' => '_blank', 'escape' => false)
                );
            ?>
        </div>
        <div class="row">
            <?php echo $this->element('sql_dump'); ?>
        </div>
    </div>

</body>
</html>

我知道的一件事是angular.js正确加载。我知道这是因为我的{{1 + 1}}语句在浏览器中显示2。从技术上讲，由于路由，我应该看到文本“用户列表”，它包含在我的部分中。另外，当我查看源代码并单击对angular-routes.js的引用时，它会显示angular-routes.js的源代码，所以我知道我肯定包含angular-routes.js。

任何建议都将不胜感激。

Answer 1

您没有提及是否有可用的范围数据。尝试将它们登录到控制台。

你确定链接是否正确？也许蛋糕和棱角分明的路线之间会发生碰撞。

Answer 2

我认为您应该将您的应用定义为包含'ngRoute'模块作为依赖项的模块。

var csppmAapp = angular.module('csppmApp',['ngRoute']);

CakePHP和AngularJS Partials路由问题

2 个答案: