使用 ng-if 时不显示 ion-view 标题答案

【问题标题】：ion-view title does not show when using ng-if使用 ng-if 时不显示 ion-view 标题
【发布时间】：2015-06-16 16:46:30
【问题描述】：

我正在为一个应用制作一个介绍屏幕。此屏幕（3 张幻灯片）仅在新用户时出现。所以我的做法是：

默认路线总是会进入这个介绍屏幕
在介绍屏幕控制器中，检查 (cookie) 以查看用户之前是否看过此屏幕。取决于此，切换$scope.showIntro。然后在下一个主应用屏幕上执行$state.go()。
在介绍视图中，使用ng-if="showIntro"。因此，如果 $scope.showIntro == false，则 DOM 为空白。

这里是棘手的部分：

没有办法检查用户是否看过这个屏幕，因为我使用的是$localStorage，并且在我创建路由时它在 app() 中不存在。这就是我必须在控制器中执行此检查逻辑的原因。
我不得不使用ng-if，因为如果我使用ng-show，它太慢了，用户会在被路由到主屏幕之前看到一闪而过的介绍屏幕。

问题：

如果我在ion-view 组件上使用ng-if，一旦DOM 再次注入视图，标题就不会刷新。 为什么会这样以及如何解决这个问题？也许有办法重新运行摘要？

代码 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 to navigate to the main app
      $scope.startApp = function() {
        $state.go('main');
      };
      $scope.next = function() {
        $ionicSlideBoxDelegate.next();
      };
      $scope.previous = function() {
        $ionicSlideBoxDelegate.previous();
      };
    
      // Called each time the 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 you for choosing the Awesome App!</h3>
                <div id="logo">
                  <img src="http://code.ionicframework.com/assets/img/app_icon.png">
                </div>
                <p>
                  We've worked super hard to make you happy.
                </p>
                <p>
                  But if you are angry, too bad.
                </p>
              </ion-slide>
              <ion-slide>
                <h3>Using Awesome</h3>
                
                <div id="list">
                  <h5>Just three steps:</h5>
                  <ol>
                    <li>Be awesome</li>
                    <li>Stay awesome</li>
                    <li>There is no step 3</li>
                  </ol>
                </div>
              </ion-slide>
              <ion-slide>
                <h3>Any questions?</h3>
                <p>
                  Too 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>

编辑 1

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

以下答案的示例仅在介绍状态具有 / 作为 url 路由时才有效。但是如果你放/intro或者其他的url，状态就一直在迭代（截图）。

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");
}

【问题讨论】：

尝试使用 ng-show 代替 ng-if。

标签： javascript css angularjs ionic-framework

【解决方案1】：

您可以在视图开始之前使用$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");
    } 
    }
});

我所做的是为每个状态附加一个属性，这样我就可以确切地知道哪个是 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
  },            
})

在更改$stateChangeStart 之前，我检查本地存储是否设置了visitedIntro 字段。如果设置好了，我会去主要路线。

在您的介绍控制器中，您可以设置 localstorage 属性的值：

.controller('IntroCtrl', function($scope, $state, $ionicSlideBoxDelegate, $localStorage) {

  $scope.title = "<b>CUSTOM</b> TITLE";
  $scope.showIntro = true;

  // Called to navigate to the main app
  $scope.startApp = function() {
    $state.go('main');
  };
  $scope.next = function() {
    $ionicSlideBoxDelegate.next();
  };
  $scope.previous = function() {
    $ionicSlideBoxDelegate.previous();
  };

  // Called each time the slide changes
  $scope.slideChanged = function(index) {
    $scope.slideIndex = index;
    if (index === 2)
    {
      $localStorage.visitedIntro = true;
    }
  };

});

当用户滑动并到达我设置的最后一张幻灯片时$localStorage.visitedIntro = true

if (index === 2)
{
   $localStorage.visitedIntro = true;
}

如果您想了解它是如何工作的，请查看完整示例 here。

当然，这只是一种选择。您还可以使用ui-ruoter 的解析。

更新：

奇怪的迭代是 ui-ruoter 的一个已知问题。您可以在 SO 上查看此question。

您可以通过这种方式更改其他方式，并且可以正常工作：

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

我知道它不是很优雅，但至少它有效。
更新plunker。

【讨论】：

感谢您的回答，但我的介绍就像 app.intro 并且有 url /intro/slides 导致奇怪的迭代。你知道为什么吗？更新了上面的问题。