Ionic-item在导航栏中进行双向数据绑定

Ionic - item does two way data binding in the nav bar

本文关键字：数据绑定 导航 Ionic-item      更新时间：2023-09-26

我在导航栏中有一个图标，应该根据位置真/假切换显示还是不显示。在视图中进行测试效果很好，但结果在导航栏中不起作用。两个页面使用相同的控制器。翻译英语

index.html-导航栏

<ion-nav-bar class="bar-stable" ng-controller="DashCtrl">
  <ion-nav-buttons side="right">
    <i class="icon ion-eye ng-show="vaovivo.valor"></i>
  </ion-nav-buttons>
<ion-nav-bar

Account.html-切换

<ion-toggle ng-model="vaovivo.valor" ng-checked="vaovivo.valor">
  Modo ao Vivo
</ion-toggle>

Controllers.js

角度模块（"启动控制器"，[]）

.controller('DashCtrl', function($scope,$rootScope) {    
  $scope.vaovivo = {'valor':false}
})

app.js

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
  // setup an abstract state for the tabs directive
    .state('tab', {
    url: '/tab',
    abstract: true,
    templateUrl: 'templates/tabs.html'
  })
  // Each tab has its own nav history stack:
  .state('tab.dash', {
    url: '/dash',
    views: {
      'tab-dash': {
        templateUrl: 'templates/tab-dash.html',
        controller: 'DashCtrl'
      }
    }
  })
  .state('tab.account', {
    url: '/account',
    views: {
      'tab-account': {
        templateUrl: 'templates/tab-account.html',
        controller: 'DashCtrl'
      }
    }
  });
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/dash');
});

更新：index.html-导航栏

<ion-nav-bar class="bar-stable" ng-controller="DashCtrl">
  <ion-nav-buttons side="right">
    <i class="icon ion-eye" ng-show="vaovivo.valor"></i>
  </ion-nav-buttons>
<ion-nav-bar>

逻辑看起来不错，但有一件事可能会阻止ng show在导航栏中工作。您没有正确关闭离子导航栏，这可能是问题所在。

首先，通过添加结束引号来适当地结束ng类

<i class="icon ion-eye" ng-show="vaovivo.valor"></i>

第二，适当关闭离子导航栏。

</ion-nav-bar>
相关文章：