离子隐藏和显示元素ng-show？

debugcn 发表于 Dev

法比安

JS新手，Ionic框架，AngularJS。我正在尝试使用ng-show && ng-click来在单击按钮时显示标题。我仍然没有得到预期的结果，有什么想法吗？

这是我的索引：

<body ng-app="starter" ng-controller="HomeCtrl as home">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar ng-show="display('on')" class="bar-balanced">
      <ion-content>
      <ion-nav-back-button class="bar-balanced">
      </ion-nav-back-button>
      </ion-content>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>
  </body>

我的控制器：

.controller('HomeCtrl', function($scope) {
$scope.display = function (x) {

  if (x == 'on'){
    return true;
  }
  else if (x == 'off'){
    return false;
  }
}

})

我的看法：

<ion-view ng-controller="HomeCtrl as home">

  <ion-content class="splash">
  </ion-content>

  <ion-footer-bar class="bar-balanced">
    <button ng-click="display('on')" class="button-large button-full button-clear">
      <a  class="button button-icon icon ion-log-in"href="#/login" >

      </a>
    </button>
  </ion-footer-bar>


</ion-view>

如果我错过了任何内容，将编辑带有更新的帖子**

尼古拉斯·马克库拉（Nicholas J.Markkula）

我在这里看到了几个问题，首先导航栏和页脚栏元素都应位于ng-controller元素内。这将使导航栏可以访问示波器以确定是否应显示它。

同样，您应该在示波器上使用变量来确定是否显示了导航栏，下面是完整的示例。

var app = angular.module('myApp', []);

app.controller('HomeCtrl', function($scope) {
  $scope.isNavVisible = false;
  $scope.displayNav = function(x) {
    if (x == 'on') {
      $scope.isNavVisible = true;
    } else if (x == 'off') {
      $scope.isNavVisible = false;
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<html ng-app="myApp">
<div ng-controller="HomeCtrl">
  <ion-nav-bar ng-show="isNavVisible" class="bar-balanced">
    <span>Nav Content</span>
    <ion-content>
      <ion-nav-back-button class="bar-balanced">
      </ion-nav-back-button>
    </ion-content>
  </ion-nav-bar>

  <ion-footer-bar class="bar-balanced">
    <button ng-click="displayNav('on')" class="button-large button-full button-clear">
      <a class="button button-icon icon ion-log-in" href="#/login">Login</a>
    </button>
  </ion-footer-bar>
</div>

</html>

如果您需要从多个控制器操纵导航，则可以使用类似的服务来完成

var app = angular.module('myApp', []);

app.service('navService', function() {
  this.isNavVisible = false;
});

app.controller('RootCtrl', ['$scope', 'navService',
  function($scope, navService) {
    $scope.navService = navService;
  }
]);

app.controller('HomeCtrl', ['$scope', 'navService',
  function($scope, navService) {
    $scope.displayNav = function(x) {
      if (x == 'on') {
        navService.isNavVisible = true;
      } else if (x == 'off') {
        navService.isNavVisible = false;
      }
    }
  }
])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="RootCtrl">
  <!--
      The nav bar that will be updated as we navigate between views.
    -->
  <ion-nav-bar ng-show="navService.isNavVisible" class="bar-balanced">
    <span>Nav Content</span>
    <ion-content>
      <ion-nav-back-button class="bar-balanced">
      </ion-nav-back-button>
    </ion-content>
  </ion-nav-bar>
  <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
  <ion-view ng-controller="HomeCtrl">

    <ion-content class="splash">
    </ion-content>

    <ion-footer-bar class="bar-balanced">
      <button ng-click="displayNav('on')" class="button-large button-full button-clear">
        <a class="button button-icon icon ion-log-in" href="#/login">
Login
        </a>
      </button>
    </ion-footer-bar>


  </ion-view>
</body>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。