JS函数无法在离子应用程序中运行

时间:2016-05-19 06:01:50

标签: jquery ionic-framework ionic2 ionic-view

大家好,我是离子的新手。我已经制作了一个Android版本并在我的移动设备上运行它,但我遇到的问题是我的应用程序没有更改我的应用程序,我点击它们。我有一个删除该类的js事件,然后显示如下选项卡:

$scope.nonCompletedAction = function(event) {
  // alert('abc');
  $('#' + $('div#actions_tab a.active').attr('data-id')).css('display', 'none');
  $('div#actions_tab a.active').removeClass('active');

  $('div#actions_tab a[data-id=' + event + ']').addClass('active');
  $('#' + event).css('display', 'block');
}

以下是没有标签的页面:

标签页

<ion-view view-title="Actions">
  <ion-content>
    <div id="key">
      <ion-checkbox>
        <h2 class="ng-binding">Key Test Action</h2>
        <span class="distance ng-binding"></span>
        <h3 class="ng-binding">Created : May 12, 2016</h3>
        <h3 class="ng-binding">Target : May 12, 2016</h3>
      </ion-checkbox>
    </div>

    <div id="important" style="display:none">
      <ion-checkbox>
        <h2 class="ng-binding">Important Test Action</h2>
        <span class="distance ng-binding"></span>
        <h3 class="ng-binding">Created : May 12, 2016</h3>
        <h3 class="ng-binding">Target : May 12, 2016</h3>
      </ion-checkbox>
    </div>

    <div id="additional" style="display:none">
      <ion-checkbox>
        <h2 class="ng-binding">Additional Test Action</h2>
        <span class="distance ng-binding"></span>
        <h3 class="ng-binding">Created : May 12, 2016</h3>
        <h3 class="ng-binding">Target : May 12, 2016</h3>
      </ion-checkbox>
    </div>

    <ion-footer-bar>
      <div class="tabs-striped  tabs-background-positive tabs-color-light">
        <div class="tabs" id="actions_tab">
          <a class="tab-item active" data-id="key" ng-click="nonCompletedAction('key')">
            <i class="icon ion-home"></i> Key
          </a>
          <a class="tab-item " data-id="important" ng-click="nonCompletedAction('important')">
            <i class="icon ion-star"></i> Important
          </a>
          <a class="tab-item " data-id="additional" ng-click="nonCompletedAction('additional')">
            <i class="icon ion-gear-a"></i> Additional
          </a>
        </div>
      </div>
    </ion-footer-bar>
  </ion-content>
</ion-view>

当我使用Chrome浏览器查看它时,这是有效的,但在应用程序中它无效。请告诉我,我做错了什么。

我想再做一个离子渲染html视图的事情,或者它将我们的代码转换为本机库,有没有办法调试应用程序

1 个答案:

答案 0 :(得分:1)

Ionic将视图呈现为HTML,实际上您可以将其视为离子应用程序中的嵌入式Web浏览器,并且可以通过cordova javascript插件为您提供本机设备功能(如相机)。

要在Android设备上调试您的离子应用程序,请将您的Android设备连接到您的计算机并确保启用USB调试,然后导航到&#34; chrome:// inspect&#34;在应用程序运行时从您的Chrome浏览器中,您应该能够将其调试为普通的html页面。

https://developer.chrome.com/devtools/docs/remote-debugging