Question

当我点击链接时，我的角度（离子）应用程序不会加载我的模板。因此，如果我点击链接，地址栏中的网址会发生变化，但模板不会发生变化。我留在我的主页上。如果我将自己的网址放在地址栏中并单击“输入”，我的模板就会加载。

  <ion-side-menus ng-controller="HomeCtrl">
      <ion-side-menu-content>
          <ion-header-bar class="bar-positive">
              <button class="button button-icon ion-navicon" ng-click="toggleLeft()" ng-hide="$exposeAside.active"></button>
              <h1 class="title">Home</h1>
          </ion-header-bar>
          <ion-content>

              <ion-list class="feed">

                  <ion-item class="item">
                      Click <a href="#/friends">Here</a> to go on Friends
                  </ion-item>
                  <ion-item class="item">
                      Click <a href="#/notification">Here</a> to go on Notification
                  </ion-item>

              </ion-list>

          </ion-content>
      </ion-side-menu-content>
      <ion-side-menu expose-aside-when="large" class="panel-menu-left">
          <ion-content>
              <div ng-include src="'menu.html'"></div>
          </ion-content>
      </ion-side-menu>
      <div ng-include src="'tabs.html'"></div>
  </ion-side-menus>

我创建了一个Plunker：http://plnkr.co/edit/IFHpZF4MOOrRYciLTjAs?p=info

http://run.plnkr.co/owTNxkDqZwhK4QHv/#/

如果您点击通知，则网址会更改，但网页不会更改。如果您在http://run.plnkr.co/owTNxkDqZwhK4QHv/#/notification页面加载时直截了当。

我做错了什么？

Answer 1

这是解决方案。

结构：

www/
    templates/
        menu.html
        hompage.html
        notification.html
        ...
    index.html

app.js：

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
app = angular.module('starter', ['ionic'])

app.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
});

app.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
    $ionicConfigProvider.views.transition('none'); //remove this if you want a slide annimation each time you change state
    $stateProvider
        .state('app', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/menu.html"
        })
        .state('app.homepage', {
            url: "/homepage",
                views: {
                'menuContent' :{
                    templateUrl: "templates/homepage.html",
                    controller: "HomeCtrl"
                }
            }
        })
        .state('app.notification', {
            url: "/notification",
                views: {
                'menuContent' :{
                    templateUrl: "templates/notification.html",
                    controller: "NotificationCtrl"
                }
            }
        })
        .state('login', {
            url: "/login",
            templateUrl: "templates/login.html",
            controller: "LoginCtrl"
        })
        .state('app.friends', {
            url: "/friends",
                views: {
                'menuContent' :{
                    templateUrl: "templates/friends.html",
                    controller: "FriendsCtrl"
                }
            }
        })
    ;
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/homepage');
});

app.controller('AppCtrl', function($scope, $ionicSideMenuDelegate, $state) {
    $scope.toggleLeft = function() {
        $ionicSideMenuDelegate.toggleLeft();
    };
});

app.controller('HomeCtrl', function($scope) {
    console.log("HOME");
});

app.controller('NotificationCtrl', function($scope) {
    console.log("NOTIFICATION");
});

app.controller('FriendsCtrl', function($scope) {
    console.log("FRIENDS");
});

app.controller('LoginCtrl', function($scope, $state) {
    console.log("LOGIN");
    $scope.credentials = {
        username: 'hotgeart',
        password: '123456'
    };
    $scope.submit = function (credentials) {
        alert('Login: '+ $scope.credentials.username +'\nPassword: '+$scope.credentials.password);
        $state.go('app.homepage');
    };
});

的index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>Test</title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <script src="cordova.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body ng-app="starter" ng-controller="AppCtrl">
        <ion-nav-view></ion-nav-view>
    </body>
</html>

menu.html（父母）

<ion-side-menus enable-menu-with-back-views="true">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-positive">
            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view> <!- THE CONTENT LOAD HERE -->
    </ion-side-menu-content> 
    <ion-side-menu side="left">
        <ion-content>
            <ion-list class="panel-menu-left">
                <ion-item class="item" href="#/login">
                    Login
                </ion-item>
                <ion-item class="item" href="#/app/homepage">
                    Homepage
                </ion-item>
                <ion-item class="item" href="#/app/notification">
                    Notification
                </ion-item>
                <ion-item class="item" href="#/app/friends">
                    Friends
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
    <div class="tabs tabs-icon-only">
        <div class="border"></div>
        <a href="#/app/friends" class="tab-item friends">
            <div class="flag"></div>
            <i class="icon ion-ios-people-outline"></i>
        </a>
        <a href="#/app/notification" class="tab-item notifications">
            <div class="flag"></div>
            <i class="icon ion-ios-bell-outline"></i>
        </a>
        <a href="#/app/friends" class="tab-item visitors">
            <div class="flag"></div>
            <i class="icon ion-ios-eye-outline"></i>
        </a>
    </div>
</ion-side-menus>

模板示例（notification.html，friends.html和主页仅与文本更改相同）

<ion-view view-title="Home">
    <ion-content>
        <ion-list class="feed">
            <ion-item class="item">
                Click <a href="#/app/friends">Here</a> to go on Friends
            </ion-item>
            <ion-item class="item">
                Click <a href="#/app/notification">Here</a> to go on Notification
            </ion-item>
        </ion-list>
    </ion-content>
</ion-view>

login.html（外部网页测试）

<ion-content class="padding">
    <h1>External page (without menu)</h1>  
    <form role="form" ng-submit="submit(credentials)">
        <div class="alert alert-danger" ng-if="errorMessage">
            {{ errorMessage }}
        </div>
        <div class="list list-inset">
            <label class="item item-input">
                <input type="text" ng-model="credentials.username" placeholder="Username" required>
            </label>
            <label class="item item-input">
                <input type="password" ng-model="credentials.password" placeholder="Password" required>
            </label>
            <br><a href="#/app/homepage">HOMEPAGE</a>
        </div>
        <button class="button button-block button-positive" ng-click="submit(credentials)">Login</button>
    </form>
</ion-content>

希望将来能帮助某人。

Answer 2

<div class="tabs tabs-icon-only">

 <a ui-sref=“notification" class="tab-item notifications">
  <div class="flag"></div>
  <i class="icon ion-ios-bell-outline"></i>
 </a>
//other items
</div>

检查问题中答案的一部分：Angular-ui-router: ui-sref-active and nested states

（为此，$ state应在视图中可用。）

angular.module('xyz').controller('AbcController', ['$scope', '$state', function($scope, $state) {
   $scope.$state = $state;
}]);)

Answer 3

我不知道离子，但我认为你的文件夹结构不正确。如果我添加一个简单的内联模板，你的plunkr正在工作。例如：

.state('friends', {
     url: '/friends',
     template: '<p>Hello, world!</p>',
     controller: 'FriendsCtrl',
 });

我读过有关离子文件夹结构here和here的内容。似乎模板必须位于特殊目录中：

来自第一个链接：

PROJECT

钩
平台
WWW
- templates /

来自第二个链接：

“我们将使用的模板位于我们项目的www / templates / user.html中。”

修改

如果模板文件夹没问题，我想你自己已经回答了这个问题：你的模板错了。正如我已经说过的，我不知道离子，但像this这样的东西（主页和朋友 - 通知仍然被打破）。从本质上讲，你似乎必须像ion-view那样开始一个模板：

<ion-view ng-controller="YourController"> <ion-content> ...

上面的plunkr并不是很漂亮，但它说明了这一点，并强制执行我之前发表的评论。重构代码以摆脱菜单并将其放在一个中心位置 - 在我的plunkr中只是在index.html中。

关于模板和结构，我刚刚找到this here：

视图[模板]是应用的状态或页面标记的位置住。在Ionic中，这些文件看起来像这样：

<ion-view title="About"> <ion-content> My super cool content here! </ion-content> </ion-view>

Angular不加载模板

3 个答案: