Javascript 离子隐藏和显示元素？_Javascript_Jquery_Angularjs_Ionic Framework_Boolean

Javascript 离子隐藏和显示元素？

javascript jquery angularjs ionic-framework

Javascript 离子隐藏和显示元素？,javascript,jquery,angularjs,ionic-framework,boolean,Javascript,Jquery,Angularjs,Ionic Framework,Boolean,JS新手，离子框架，AngularJS。我正在尝试使用ng show&&ng click在单击按钮时显示标题。我仍然没有得到预期的结果，有什么想法吗这是我的索引： <body ng-app="starter" ng-controller="HomeCtrl as home">  <ion-

JS新手，离子框架，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>

我的看法是：

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

如果我遗漏了任何内容，请使用更新编辑帖子**

您应该使用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中的工厂/服务或属性。

我在这里看到一些问题，首先，导航栏和页脚栏元素都应该在ng控制器元素中。这将允许导航栏访问范围，以确定是否应显示该范围

此外，您应该在作用域上使用一个变量来确定是否显示导航栏，完整示例如下

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'HomeCtrl'，函数（$scope）{
$scope.isNavVisible=false；
$scope.displayNav=函数（x）{
如果（x=='on'）{
$scope.isNavVisible=true；
}如果（x=='off'，则为else）{
$scope.isNavVisible=false；
}
}
})


导航内容

谢谢，我已经试过了，但它仍然不起作用，我已经添加了更多代码以进行说明**你可以添加你的app.js文件吗。你对父视图和子视图使用相同的控制器。检查此项以了解我想说的内容。你的意思是：-1-你不能共享控制器2-对于每个视图，你需要生成一个控制器？？是的，你可以共享控制器。问题是，您在索引中声明控制器，然后在内部视图中声明相同的控制器。我的意思是，你不能做的是将控制器相互注入。我已经尝试过了，但仍然不起作用。我添加了更多代码**“首先，导航栏和页脚栏元素都应位于ng控制器元素内。这将使导航栏能够访问范围，以确定是否应显示它。”**使用MVC方法**确保您没有多次声明“ng controller=“HomeCtrl as home”，它应该只在一个级别上声明一次，即emcompasses nabvar和footer。我已经将它放在body标签上，emcompasses整个应用程序。该控制器现在已从视图中移除。问题仍然存在。如果使用MVC方法，则可能需要从多个控制器操纵导航，因为每个视图可能使用不同的控制器。我刚刚用另一个解决方案更新了我的答案，该解决方案将允许您使用服务来实现这一点。服务是可以注入任何控制器的单例对象。这就是你想要的解决方案吗？我已经尝试过了，它与ionic framework的反应是，在登录屏幕上打印导航栏，然后在下一个屏幕上显示“后退”按钮，并允许用户返回主屏幕？

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