标签: ionic

我正在研究Ionic Framework,并面临使用Apache Cordova Network API检测Android App中的互联网连接的问题.我已经参考了这个教程并创建了一个演示项目,它工作正常.

我按照以下步骤操作.[来自教程]

1. ionic start testApp sidemenu

2. ionic platform add android

3. 打开 testApp/www/js/app.js

4. 复制粘贴此代码

   if(window.Connection) {
   
     if(navigator.connection.type == Connection.NONE) {
         alert('There is no internet connection available');
     }else{
         alert(navigator.connection.type);
     }
   }else{
         alert('Cannot find Window.Connection');
   }
   

   Run Code Online (Sandbox Code Playgroud)

5. 安装Cordova插件 cordova plugin add org.apache.cordova.network-information

6. 建立 ionic build android

7. 跑 ionic run android

这很好用

问题

8. 复制粘贴www来自mainproject于testApp并执行步骤6和7

我收到警报 Cannot find Window.Connection

复制粘贴后app.js看起来像这样

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory …

我想为此代码设置自定义图标(ionicons)大小:

<button class="button button-icon icon ion-stop customIconSound"></button>

对于class customIconSound我试过以下:

button.customIconSound,button.button-icon {
    font-size: 52px !important;
    color: #fff;
    line-height: 55px!important;
}

但没有运气.如果我尝试没有按钮按钮图标类的图标类,我认为它正在工作,但没有按钮类图标没有按下状态(因为它不是按钮).

我该怎么解决呢？

谢谢你的建议.

在开始使用新的离子应用程序之后,我可以看到bower.json它带有离子devdependencies.为什么它是一个devdependency而不是正常的dependency？

"devDependencies": {
    "ionic": "driftyco/ionic-bower#1.0.0-rc.0"
},

谢谢,我现在感到困惑

我正在尝试离子框架,并发现应用程序使用基本选项卡应用程序加载非常缓慢(几乎没有任何更改).

这是我做的:

ionic start TabsDemo tabs
cd \TabsDemo
ionic platform add android
ionic build TabsDemo

我在配置中注释掉了两个启动画面元素.在HTC M7上运行,在应用程序第一次加载之前,我看到黑屏约3秒钟.之后缓存资源并且应用程序加载正常.

是否有设置或我可以做的事情让我的应用程序在合理的时间内加载或者所有离子应用程序都受此影响？

我正在尝试在离子框架中构建一个应用程序.

我正在尝试构建此功能,就像我点击图库中的照片并点击共享一个共享平台将打开.我想在这里展示我的应用程序.

我在plist文件中做了一些修改

这是我的plist文件的代码

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>CFBundleDevelopmentRegion</key>
    <string>English</string>
    <key>CFBundleDisplayName</key>
    <string>${PRODUCT_NAME}</string>
    <key>CFBundleDocumentTypes</key>
    <array>
      <dict>
        <key>CFBundleTypeName</key>
        <string>public.jpeg</string>
        <key>CFBundleTypeRole</key>
        <string>Editor</string>
        <key>LSHandlerRank</key>
        <string>Owner</string>
        <key>LSItemContentTypes</key>
        <array>
          <string>public.jpeg</string>
        </array>
      </dict>
    </array>
    <key>CFBundleExecutable</key>
    <string>${EXECUTABLE_NAME}</string>
    <key>CFBundleIconFile</key>
    <string>icon.png</string>
    <key>CFBundleIcons</key>
    <dict>
      <key>CFBundlePrimaryIcon</key>
      <dict>
        <key>CFBundleIconFiles</key>
        <array>
          <string>icon-40</string>
          <string>icon-small</string>
          <string>icon-60</string>
          <string>icon.png</string>
          <string>icon@2x</string>
          <string>icon-72</string>
          <string>icon-72@2x</string>
        </array>
        <key>UIPrerenderedIcon</key>
        <false/>
      </dict>
    </dict>
    <key>CFBundleIcons~ipad</key>
    <dict>
      <key>CFBundlePrimaryIcon</key>
      <dict>
        <key>CFBundleIconFiles</key>
        <array>
          <string>icon-small</string>
          <string>icon-40</string>
          <string>icon-50</string>
          <string>icon-76</string>
          <string>icon-60</string>
          <string>icon</string>
          <string>icon@2x</string>
          <string>icon-72</string>
          <string>icon-72@2x</string>
        </array>
        <key>UIPrerenderedIcon</key>
        <false/>
      </dict>
    </dict>
    <key>CFBundleIdentifier</key>
    <string>com.ionicframework.hitutest948556</string> …

我正在使用click事件来打开这样的模态窗口,

但是在这个点击事件中,我需要传递一个id值,这样我就可以显示有关该id值的详细信息.这是控制器部分,

           $ionicModal.fromTemplateUrl('modal.html', function($ionicModal) {
                $scope.modal = $ionicModal;
            }, {
                // Use our scope for the scope of the modal to keep it simple
                scope: $scope,
                // The animation we want to use for the modal entrance
                animation: 'slide-in-up'
            });  

有没有办法做到这一点...... ???

谢谢.

我正在使用Ionic框架构建iOS应用程序.当我使用select-elements时,在iOS-native菜单中选择项目时,我没有得到标签为"Done"的标题.但是,当我在iOS/Safari中使用该应用程序时,它会显示出来.附加截图和代码.任何输入/解决方案都将非常感激.

截图:

iOS Safari截图

iOS Native/Ionic截图

标记

<label class="item item-input item-select">
    <div class="input-label">
        Bostadstyp
    </div>
    <select ng-change="addParam('objectType', selectedHouseType)" ng-model="selectedHouseType" ng-options="houseType.id as houseType.label for houseType in houseTypes"></select>
</label>

我有以下内容ion-view:

<ion-view view-title="Success" ng-controller="successController" class="success-view">
  <ion-content>

    <div class="row row-center">
      <div class="col">

        <h1>Success!</h1>

        <h3>Your login credentials will be SMSed to you shortly</h3>

        <button class="button button-block button-positive" ui-sref="login">
          Okay
        </button>

      </div>
    </div>

  </ion-content>
</ion-view>

我正试图col在屏幕上垂直对齐它.现在我明白,这是唯一可行的方法就是如果我row占据了100%的高度.然而,如果我继续添加style="height: 100%;"到我的row它不起作用,行的高度仍然包含它的内容.即使我添加!important它仍然没有跨越屏幕的整个高度...任何想法？

使用在Android和Windows中执行的Ionic应用程序.

有一些服务,例如Ionic $ionicLoading,我们覆盖功能以便在Windows中正常工作:

angular.factory('$ionicLoading', function(){
    return {
        show: function (){...} // custom implementation
        hide: function (){...} // custom implementation
    }
});

但是我们必须覆盖其他服务,只是为了不破坏应用程序.在这种情况下,提供不会做任何事情的服务将非常有用.例如:

angular.factory('$ionicExampleService', function(){
    return {
        *foo*: angular.noop // for operations
        *bar*: promise // returns promise
    }
});

注意:我知道更好的方法是使用在Ionic实现或制作之间选择的服务,但这只是为了学习.

理想情况会更进一步,能够返回更加防弹的东西会很棒.像通用的灵活服务:

angular.factory('$ionicPopup', function(){
    return /*magic*/;
});

$ionicPopup.show({...}) // show was not defined
    .then(foo); // won't break and will execute foo()

有可能的？

我正在尝试改变Ionic 2中的导航栏背景颜色.我尝试了很多东西,比如class ="bar bar-stable"等

现在我的代码看起来像这样:

<ion-navbar  *navbar> 

所以背景当前是灰色的(默认)