在MobileAngularUI中导航到TemplateURL无法正常工作

时间:2017-01-16 21:40:39

标签: angularjs twitter-bootstrap ionic-framework angular-ui-bootstrap mobile-angular-ui

我正在MobileAngularUI中创建一个新项目,之前是从Ionic项目背景创建的。我使用模板URL从一个页面导航到另一个页面时遇到一些困难,而我的控制器也没有绑定。我最终定义了所有可能性和类路径,但它不是导航到另一个HTML控制器。

以下是我项目的来源。

在app.js

angular.module('FirstMobileAngularRouter', [
  'ngRoute',
  'mobile-angular-ui',
  'FirstMobileAngularRouter.controllers.Main',
  'FirstMobileAngularRouter.controllers.Calender'
])

.config(function($routeProvider) {
  //$routeProvider.when('/', {templateUrl:'home.html',  reloadOnSearch: false});
  $routeProvider
      .when('/', {templateUrl:'home.html',  reloadOnSearch: false})
      .when('/calender',
          { templateUrl:'/calender.html',
            controller: 'CalenderCtrl',
            reloadOnSearch: false
          })
      .otherwise({redirectTo: '/'});
});

侧边栏HTML

<div class="scrollable">
  <h1 class="scrollable-header app-name">FirstMobileAngularRouter</h1>  
  <div class="scrollable-content">
    <div class="list-group" ui-turn-off='uiSidebarLeft'>
      <a class="list-group-item" href="#/">Home <i class="fa fa-chevron-right pull-right"></i></a>
      <a class="list-group-item" href="#/calender">Calender <i class="fa fa-chevron-right pull-right"></i></a>
    </div>
  </div>
</div>

在Index.html中

<div class="navbar navbar-app navbar-absolute-bottom">
        <div class="btn-group justified">
          <a href="#/home" class="btn btn-navbar"><i class="fa fa-home fa-navbar"></i> Home</a>
          <a href="#/calender" class="btn btn-navbar"><i class="fa fa-github fa-navbar"></i> Calender</a>
          <a href="https://github.com/mcasimir/mobile-angular-ui/issues" class="btn btn-navbar"><i class="fa fa-exclamation-circle fa-navbar"></i> Issues</a>
        </div>
      </div>

 <head>
 <script>
      document.write('<base href="' + document.location + '" />');
 </script>
 <script type="text/ng-template" id="home.html">
     <h2>Home</h2>
 </script>
 <script type="text/ng-template" id="calender.html">
    <h2>Calender</h2>
 </script>
  <script src="calenderCtrl.js"></script>
 </head>

在CalenderCtrl.js

angular.module('FirstMobileAngularRouter.controllers.Calender', [])

    .controller('CalenderCtrl', function($scope, $routeParams){

    });

但它没有导航到日历页面。

以下是MobileAngularUI完整2页项目的免费下载链接

FirstMobileAngularUI project

0 个答案:

没有答案