angularjs – 角度不加载模板

当我点击链接时,我的角度(离子)应用程序不加载我的模板.所以,如果我点击链接,我的地址栏中的URL更改,但模板不.我留在我的主页上如果我把url自己放在地址栏并点击ENTER,我的模板加载.

<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转到最后的页面加载.

我做错了什么

这是解决方案.

结构体：

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',$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和homepage与文本更改相同)

<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>

<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>

希望将来会帮助某人.

angularjs – 角度不加载模板

猜你在找的Angularjs相关文章