javascript - ion-view title does not show when using ng-if -


i doing intro screen app. screen (3 slides) appears when on new user. way is:

  1. default route going intro screen

  2. from intro screen controller, check (cookie) see if user has seen screen before. depending on that, toggle $scope.showintro. $state.go() next main app screen.

  3. in intro view, use ng-if="showintro". if $scope.showintro == false, dom blank.

here tricky parts:

  1. there no way check whether user has seen screen or not because using $localstorage , doesn't exist in app() when create route. that's why have check logic in controller.

  2. i had use ng-if because if use ng-show, it's slow , user see flash of intro screens before being routed main screen.

the problem:

if use ng-if on ion-view component, title not refreshed once dom injected view again. why , how fix problem? maybe way re-run digest?

code http://codepen.io/hawkphil/pen/jplqge

angular.module('ionicapp', ['ionic'])        .config(function($stateprovider, $urlrouterprovider) {        $stateprovider        .state('intro', {          url: '/',          templateurl: 'templates/intro.html',          controller: 'introctrl'        })        .state('main', {          url: '/main',          templateurl: 'templates/main.html',          controller: 'mainctrl'        });              $urlrouterprovider.otherwise("/");            })            .controller('introctrl', function($scope, $state, $ionicslideboxdelegate) {        $scope.title = "<b>custom</b> title";        $scope.showintro = true;                // called navigate main app        $scope.startapp = function() {          $state.go('main');        };        $scope.next = function() {          $ionicslideboxdelegate.next();        };        $scope.previous = function() {          $ionicslideboxdelegate.previous();        };              // called each time slide changes        $scope.slidechanged = function(index) {          $scope.slideindex = index;        };      })            .controller('mainctrl', function($scope, $state) {        console.log('mainctrl');                $scope.tointro = function(){          $state.go('intro');        }      });
    body {        cursor: url('http://ionicframework.com/img/finger.png'), auto;      }      .slider {        height: 100%;      }      .slider-slide {        padding-top: 80px;        color: #000;        background-color: #fff;        text-align: center;              font-family: "helveticaneue-light", "helvetica neue light", "helvetica neue", helvetica, arial, "lucida grande", sans-serif;         font-weight: 300;      }            #logo {        margin: 30px 0px;      }            #list {        width: 170px;        margin: 30px auto;        font-size: 20px;      }      #list ol {        margin-top: 30px;      }      #list ol li {        text-align: left;        list-style: decimal;        margin: 10px 0px;      }            .button.ng-hide{        display:none;      }
    <html>        <head>          <meta charset="utf-8">          <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">          <title>ionic app</title>                <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">          <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>        </head>              <body ng-app="ionicapp">                <ion-nav-bar class="bar-light">              <ion-nav-back-button>              </ion-nav-back-button>          </ion-nav-bar>                <ion-nav-view></ion-nav-view>                      <script id="templates/intro.html" type="text/ng-template">             <ion-view view-title="{{ title }}" ng-if="showintro">              <ion-nav-buttons side="left">                <button class="button button-positive button-clear no-animation"                        ng-click="startapp()" ng-show="!slideindex">                  skip intro                </button>                <button class="button button-positive button-clear no-animation"                        ng-click="previous()" ng-show="slideindex > 0">                  previous slide                </button>              </ion-nav-buttons>              <ion-nav-buttons side="right">                 <button class="button button-positive button-clear no-animation"                        ng-click="next()" ng-show="slideindex != 2">                  next                </button>                <button class="button button-positive button-clear no-animation"                        ng-click="startapp()" ng-show="slideindex == 2">                  start using myapp                </button>              </ion-nav-buttons>              <ion-slide-box on-slide-changed="slidechanged(index)">                <ion-slide>                  <h3>thank choosing awesome app!</h3>                  <div id="logo">                    <img src="http://code.ionicframework.com/assets/img/app_icon.png">                  </div>                  <p>                    we've worked super hard make happy.                  </p>                  <p>                    if angry, bad.                  </p>                </ion-slide>                <ion-slide>                  <h3>using awesome</h3>                                    <div id="list">                    <h5>just 3 steps:</h5>                    <ol>                      <li>be awesome</li>                      <li>stay awesome</li>                      <li>there no step 3</li>                    </ol>                  </div>                </ion-slide>                <ion-slide>                  <h3>any questions?</h3>                  <p>                    bad!                  </p>                </ion-slide>              </ion-slide-box>            </ion-view>          </script>                <script id="templates/main.html" type="text/ng-template">            <ion-view hide-back-button="true" view-title="awesome">              <ion-content class="padding">                <h1>main app here</h1>                <button class="button" ng-click="tointro()">do tutorial again</button>              </ion-content>            </ion-view>          </script>                  </body>      </html>

edit 1

http://plnkr.co/edit/1fyr6gk6xmqjp9ha3n0m?p=preview

below answer's example works if intro state has / url route. if put /intro or other url, state kept iterating (screenshot).

function config($stateprovider, $urlrouterprovider) {   $stateprovider      .state('intro', {       url: '/intro',       templateurl: 'intro.html',       controller: 'introctrl',       data: {         isintro: true       },               })      .state('main', {       url: '/main',       templateurl: 'main.html',       controller: 'mainctrl',       data: {         isintro: false       },                 });      $urlrouterprovider.otherwise("/intro"); }

enter image description here

you can check localstorage before view starts using $statechangestart:

$rootscope.$on('$statechangestart', function (event, tostate, toparams, fromstate, fromparams) {     console.log("$rootscope => $statechangestart => " + tostate.name || '');      if (tostate.data && angular.isobject(tostate.data)) {     if (tostate.data.isintro && $localstorage.visitedintro)     {         event.preventdefault();         $state.go("main");     }      } });

what have done attach attribute every state know 1 intro (data.isintro):

.state('intro', {   url: '/',   templateurl: 'intro.html',   controller: 'introctrl',   data: {     isintro: true   },           })  .state('main', {   url: '/main',   templateurl: 'main.html',   controller: 'mainctrl',   data: {     isintro: false   },             })

before ruote change $statechangestart check if local storage has visitedintro field set. if set go main route.

in intro controller can set value of localstorage property:

.controller('introctrl', function($scope, $state, $ionicslideboxdelegate, $localstorage) {    $scope.title = "<b>custom</b> title";   $scope.showintro = true;    // called navigate main app   $scope.startapp = function() {     $state.go('main');   };   $scope.next = function() {     $ionicslideboxdelegate.next();   };   $scope.previous = function() {     $ionicslideboxdelegate.previous();   };    // called each time slide changes   $scope.slidechanged = function(index) {     $scope.slideindex = index;     if (index === 2)     {       $localstorage.visitedintro = true;     }   };  });

when user slides , reaches last slide set $localstorage.visitedintro = true

if (index === 2) {    $localstorage.visitedintro = true; }

if want see how works check complete example here.

of course option. can use resolve of ui-ruoter.

update:

the strange iteration known issue ui-ruoter. can check question on so.

you can change otherwise way , works:

$urlrouterprovider.otherwise(function ($injector, $location) {     var $state = $injector.get("$state");     $state.go("intro"); });

i know not elegant al least works.
updated plunker.


Comments

Post a Comment

Popular posts from this blog

c# - Validate object ID from GET to POST -

i have method allows user access comment have made on site. have post method lets them update comment. my normal solution send entire comment model through, let them update it, update on database when post back. involve sending commentid through in hiddenfor , can manipulated. how can verify commentid sent in get method same i'm getting in post , not able alter comment wish? how can verify commentid sent in method same i'm getting in post? basically have validate following things in post - user logged-in user. authenticated users post comments. commentid in post , should valid commentid , should present in database. userid associated logged-in user should same userid associated comment . comment should contain userid column, can check @ time of update. to make sure update happens comment has been sent in get - hold commentid in session , in post action compare commentid value in session .
Read more

node.js - Custom Model Validator SailsJS -

when using custom model validator checks record within model. return within spread doesn't seem end control flow. //post.js model /** * custom validator **/ types: { isuservalid: function(user_id) { var promise = require('bluebird'); promise.all([ user.findone({id: user_id}) ]) .spread(function(user) { console.log(user); if (user === null || user === undefined) { console.log('failed'); return false; }else{ console.log('passed'); return true; } }); } }, my response standard validation failed response. { "error": "e_validation", "status": 400, "summary": "1 attribute invalid", "model": "post", "invalidattributes": { "owner": [ { "rule": "isuservalid", ...
Read more

php - Find a regex to take part of Email -

i have following emails need extract part from: bestellnummer xxx: 1 von xxx, 1er pack ------------- anfang der nachricht ------------- foo bar baz foo bar baz // <<<<< need text here ------------- ende der nachricht ------------- ------------- anfang der nachricht ------------- foo bar baz foo bar baz ------------- ende der nachricht ------------- there 0 unlimited occurences of ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- and i'm able extract first part regex: $re = "/------------- .*? -------------.?(.*?).?------------- .*? -------------/s"; but, i'm quite new on learning regex, i'm pretty sure there must better regex extract part (foo bar baz foo bar baz) of text between ------------- anfang der nachricht ------------- ------------- ende der nachricht ------------- as can in different languages, i'm using .? to match between hyphens. i...
Read more