标签: ionic-view

我有行列表,每行有两个以上的按钮.我想在点击事件上禁用按钮,所以一旦完成ajax调用,我就可以重新启用它或完全隐藏它.

所以我想知道如何在点击事件上禁用此单个按钮.

如何禁用事件？

<button [disabled]="buttonDisabled" (click)="trigger($event)">

trigger ($event)
{
  $event.buttonDisabled = true; // ?
}

所以我正在阅读这个链接 ,它说我们可以使用chrome来远程调试一个看起来很棒的应用,但是他们没有解释如何去做.当我点击他们提供的链接时,它有一些android文档,我只看到java代码.作为一个非Java开发人员,我想知道如何在chrome for ionic framework中使用远程调试器？

我想将我的徽标放在离子栏中.我该怎么做 ？(它总是显示在左侧)我想要这样

这是我的离子代码:

 <ion-nav-bar class="bar bar-header bar-assertive">

        <ion-nav-back-button>
        </ion-nav-back-button>
        <ion-nav-buttons side ="Center">
        <div class="title"> <img alt="Company Logo" height="40" src="img/logo.png"></div>
        </ion-nav-buttons>
        <ion-nav-buttons side="right">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="right">
            </button>
        </ion-nav-buttons>

    </ion-nav-bar>

我的情况是我已经制作了一个ion-view五页使用的.这些页面通过"tab like"菜单导航,该菜单不使用ion-tabs或类似(不是问题的重点).我现在想为Ionics使用动态值,scroll-delegate但它似乎不起作用.我已经阅读了关于同一主题的其他问题(在SO和Ionic论坛上),但它们是Ionic 1.0.0左右时代的旧主题,并且提供的解决方案在今天不起作用.

我的ion-view模板:

<ion-view>
  <ion-content delegate-handle="{{category.id}}" on-scroll="scrollEvent(category.id)">
    <h1>{{category.title}}</h1>
  </ion-content>
</ion-view>

我的控制器scrollEvent功能:

$scope.scrollEvent = function(category) {
  var scrollamount = $ionicScrollDelegate.$getByHandle(category).getScrollPosition().top;
  if (scrollamount > 180) {
    console.log('scroll amount > 180');
  } else {
    console.log('scroll amount < 180');
  }
};

这会在控制台中显示以下警告:

句柄"12345"的委托找不到delegate-handle ="12345"的相应元素!没有调用getScrollPosition()!可能的原因:如果您立即调用getScrollPosition(),并且您的delegate-handle ="12345"元素是您的控制器的子元素,那么您的元素可能尚未编译.在调用getScrollPosition()时调用$ timeout,然后重试.

我试着给delegate-handle价值$ionicView.enter $ionicView.afterEnter和$ionicView.loaded.我已经给出了10秒等的功能超时,但它没有帮助.

如果我delegate-handle手动设置并运行它,它就可以工作.我需要动态设置它,因为不同的视图应该有自己的delegate-handle能够将它们彼此分开并相应地设置滚动位置等.类别的ID也可能会改变.

Ionic在浏览页面时制作这些"窗格"(缓存它们),以便我可以看到并检查句柄是否正确.

<ion-view nav-view="active" style="opacity: 0.9; transform: translate3d(-33%, 0px, 0px);">
  <ion-content delegate-handle="12345" on-scroll="scrollEvent(category.id)">
    <h1>Category 12345 …

我使用以下命令创建了一个Ionic v2应用程序:

ionic start my-app sidemenu --v2 --ts.

在app.ts文件内部,我有一些逻辑(函数)来做一些事情(比如打开一个模态并保持侧面菜单应该显示的状态).当显示某个页面(例如pages/getting-started/getting-started.ts)时,我想重用相同的功能app.ts.如何app.ts从导航到的页面访问功能？

我app.ts看起来如下.

class MyApp {
 @ViewChild(Nav) nav:Nav;
 private rootPage:any = GettingStartedPage;
 private pages:any;

 constructor(platform:Platform) {
  this.initializeApp();
  this.pages = { 
   'GettingStartedPage': GettingStartedPage, 
   'AnotherPage': AnotherPage //more pages and modals
  };
 }

 initializeApp() {
  this.platform.ready().then(() => {
   StatusBar.styleDefault();
  });
 }

 openPage(page:string) {
  //when a user clicks on the left menu items, a new page is navigated to
  let component this.pages[page];
  this.nav.setRoot(component);
 }

 openModal(page:string) { …

所以我有这个幻灯片,因为你可以看到寻呼机点/圆圈出现,我不需要包括<ion-slide-pager></ion-slide-pager>:

  <ion-slide-box>

    <ion-slide>
      <div class="slide-wrapper">

        <img class="slider-img" src="../../img/icons/corazonesfera.png"/>

        <h2>SUBTITULO 1</h2>

        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
          industry's dummy text of the printing dummy text of

        </p>

      </div>
    </ion-slide>

    <ion-slide>
      <div class="slide-wrapper">

        <img class="slider-img" src="../../img/icons/corazonesfera.png"/>

        <h2>SUBTITULO 2</h2>

        <p>
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
          industry's    Lorem Ipsum is simply dummy text of the printing and typesetting …

在我的离子应用程序中,当状态改变视图改变时,"向左滑动"和"向右滑动"效果.但我想为3种选定状态禁用此效果.

我$ionicConfigProvider.views.transition = 'none'在config块中使用但它从所有状态禁用了这种效果.

如何仅从选定状态禁用此效果？

我想在中创建自定义对话框ionic2。我已经尝试了很多参考离子文档教程，但没有得到想要的东西。

我想在用户单击图标时显示它。

请给我一些想法来实现相同的目的。

离子技术的初学者。创建项目离子启动Myapp空白离子Cordova运行android后面临的问题

@ionic/cli-utils  : 1.19.2
ionic (Ionic CLI) : 3.20.0

全局软件包：

cordova (Cordova CLI) : 8.0.0

本地套餐：

@ionic/app-scripts : 3.1.11
Cordova Platforms  : android 7.0.0
Ionic Framework    : ionic-angular 3.9.2

系统：

Android SDK Tools : 26.1.1
Node              : v8.11.2
npm               : 5.6.0
OS                : Windows 10

环境变量：

ANDROID_HOME : C:\Users\XXX\AppData\Local\Android\Sdk

其他：

backend : pro.

运行应用程序后使用android设备进行检查。chrome：// inspect /＃devices存在以下差异！

上图和URL以localhost：8080开头

图片下方的网址以file：///android_asset/www/index.html开头

如何在每个离子项目中使用chrome inspect而不是localhost：8080将URL作为file：///android_asset/www/index.html获取？

由于此问题，面临以下问题：对预检请求的响应未通过访问控制检查：在所请求的资源上不存在“ Access-Control-Allow-Origin”标头。因此，不允许访问源' http：// localhost：8080 '。响应的HTTP状态码为400。

我捕获modal.hidden事件,并对其进行检查.当检查结果为false时,我想阻止模态隐藏.我使用e.preventDefault().但它不起作用.我的代码:

$scope.$on('modal.hidden', function(event) {
    var isPassed = false;
    // do some check
    if (isPassed == false) {
        event.preventDefault();
    }  
});

我在codepen中的代码