Question

JS，Ionic框架，AngularJS的新手。我正在尝试使用ng-show＆amp;＆amp;单击以在按钮上单击时显示标题。我仍然没有得到预期的结果，任何想法？

这是我的索引：

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

如果我遗漏了任何内容，将编辑更新的帖子**

Answer 1

我在这里看到几个问题，首先导航栏和页脚栏元素应该在ng-controller元素内。这将使导航栏访问范围以确定是否应显示该范围。

此外，您应该使用示波器上的变量来确定是否显示了导航栏，完整示例如下所示。

＆＃13;

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

＆＃13;

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

＆＃13;

如果您需要操作多个控制器的导航，您可以使用类似的服务

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您应该使用ng-click指令来更改这样的值：

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

      if (x == 'on'){
        $scope.displayItem = true;
      }
      else if (x == 'off'){
        $scope.displayItem = false;
      }
    }

})

然后在你的视图中：

<ion-nav-bar ng-show="displayItem" class="bar-balanced">
  <ion-content>
  <ion-nav-back-button class="bar-balanced">
  </ion-nav-back-button>
  </ion-content>
</ion-nav-bar>

你的观点，仍然是相同的

<ion-footer-bar class="bar-balanced" ng-controller="HomeCtrl as home">
<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>

确保两个html引用同一个控制器。否则，您将无法访问$ scope.displayItem属性。

如果你想在不同的控制器之间共享数据，你应该寻找另一种选择，比如$ rootScope中的Factory / service或property。

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

2 个答案: