1
votes

I am new to ionic and angular JS. I am trying a simple app in ionic framework. I am trying to inject html template in ion-view tag with the help of ngRoute concept. But my code is not injected html template in ion-view. Also based on injected page, title bar title also be changed automatically. Also i want to show popover icon with menu item in title bar. How can i achieve this. Find the below index.html, home.html and app.js files. Thanks in advance.

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

        <link href="lib/ionic/css/ionic.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">

        <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
        <link href="css/ionic.app.css" rel="stylesheet">
        -->
        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>

        <!-- cordova script (this will be a 404 during development) -->
        <script src="cordova.js"></script>

        <!-- your app's js -->
        <script src="js/app.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

      </head>
      <body ng-app="starter" ng-controller="AppCtrl">
          <ion-nav-bar title="{{message}}" class="bar-positive">
            <button class="button button-icon ion-more" ng-click="popover.show($event)"> 
            </button>

          </ion-nav-bar>

          <ion-nav-view>

          </ion-nav-view>

          <script id="mypopover.html" type="text/ng-template">
            <ion-popover-view >
              <ion-content class="my-popover">
                <div class="list">
                  <a class="item" nav-transition="android" href="#aboutus">
                   About Us
                  </a>
                  <a nav-transition="none" class="item" href="http://ionicframework.com/docs/" target="_blank">
                    Documentation
                  </a>
                  <a class="item" href="http://showcase.ionicframework.com/" target="_blank">
                    Showcase
                  </a>
                  <a class="item" href="http://ionicframework.com/submit-issue/" target="_blank">
                    Submit an Issue
                  </a>
                  <a class="item" href="https://github.com/driftyco/ionic" target="_blank">
                    Github Repo
                  </a>
                </div>
              </ion-content>
          </ion-popover-view>
        </script>
      </body>
    </html>

templates/home.html

<script type="text/ng-template" id="home.html">
    <ion-view title="Movie Review">
        <ion-content>
        <div class="fixed-header my-video">
         <ion-slide-box show-pager="false" auto-play="false" does-continue="true">
            <ion-slide>
                <img  style="max-width:100%" src="img/irumuganmovie.png"/>
            </ion-slide>
            <ion-slide>
                <img  style="max-width:100%" src="img/irumuganmovie.png"/>
            </ion-slide>
            <ion-slide>
                <img  style="max-width:100%" src="img/irumuganmovie.png"/>
            </ion-slide>
            <ion-slide>
                <img  style="max-width:100%" src="img/irumuganmovie.png"/>
            </ion-slide>
            <ion-slide>
                <img  style="max-width:100%" src="img/irumuganmovie.png"/>
            </ion-slide>
        </ion-slide-box>
        </div>
        <div class="ion-content-below-my-video">
            <div class="row center grid-row-height">
                <div class="col width-50 grid-col-size">
                    <ion-card>
                      <img src="img/irumuganmovie.png"/>
                      <ion-card-content>
                        <ion-card-title>
                            Nine Inch Nails Live
                        </ion-card-title>
                      </ion-card-content>
                    </ion-card>
                </div>
                <div class="col width-50 grid-col-size">
                    <ion-card>
                      <img src="img/irumuganmovie.png"/>
                      <ion-card-content>
                        <ion-card-title>
                            Nine Inch Nails Live
                        </ion-card-title>
                      </ion-card-content>
                    </ion-card>
                </div>
            </div>
            <div class="row center grid-row-height">
                <div class="col width-50 grid-col-size">
                    <ion-card>
                      <img src="img/irumuganmovie.png"/>
                      <ion-card-content>
                        <ion-card-title>
                            Nine Inch Nails Live
                        </ion-card-title>
                      </ion-card-content>
                    </ion-card>
                </div>
                <div class="col width-50 grid-col-size">
                    <ion-card>
                      <img src="img/irumuganmovie.png"/>
                      <ion-card-content>
                        <ion-card-title>
                            Nine Inch Nails Live
                        </ion-card-title>
                      </ion-card-content>
                    </ion-card>
                </div>
            </div>
            </div>
        </ion-content>
    </ion-view>


</script>

app.js

// Ionic Starter App

// 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'
var app=angular.module('starter', ['ionic','ngRoute']);

app.controller('AppCtrl',function($scope,$ionicPopover)
  {
    $ionicPopover.fromTemplateUrl('mypopover.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(popover) {

    $scope.popover = popover;
  }); 

  $scope.openPopover = function($event) {
  alert("opened");  
   $scope.popover.show($event);
  };
  $scope.closePopover = function() {
    $scope.popover.hide();
  };
  // Perform Action on destroy
   $scope.$on('$destroy', function() {
    $scope.popover.remove();
  });
  // Perform action on hide popover
  $scope.$on('popover.hidden', function() {
    // Perform action
  });
  // Perform action on remove popover
  $scope.$on('popover.removed', function() {
    // Perform action
  });
});

app.config(function($routeProvider){
  $routeProvider
  .when('/',{
    url: '/home',
    templateUrl : "templates/home.html",
    controller : "homeCtrl"
  });
});

app.controller('homeCtrl',function($scope) {
  // body...
  $scope.message="home controller";
});

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

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})
1

1 Answers

0
votes

after having same problem and searching for an answer i found this: you can add <ion-nav-title> right after <ion-view>.

Example:

`<ion-view>
  <ion-nav-title>
    <span style="color: blue">hello</span>world
  </ion-nav-title>
   ....
   ....
</ion-view>`

hope it will help someone.... :)