分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了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

@L_489_5@

如果您点击通知网址更改,但不是页面.如果你在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>

@H_997_3@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 – 角度不加载模板所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：angularjs 加载模板角度

上一篇: angularjs – Angular $http状态... 下一篇:我可以从AngularJS回收URL哈希片...

猜你在找的Angularjs相关文章

Angularjs基础(八) 2022-04-20
angularjs – 在IE9中使用Angular 2需要什么？ 2019-10-10
angularjs – $http从服务到控制器的POST响应 2019-10-10
如何使用Typescript在Angular 2中创建TreeView？ 2019-10-10
angularjs – 尝试基于常量在控制器中动态设置templateUrl 2019-10-10
angular – 在app.component.ts中导入HTTP_PROVIDERS 2019-10-10
如何使用Observable初始化Reactive Angular2表单？ 2019-10-10
angular – 使用ng2-smart-table编辑和创建 2019-10-10
angularjs – 角度组件绑定未定义 2019-10-10
angularjs – 在ui.router中只更改状态更改的一个视图？ 2019-10-10