标签: ionic-view

我有一个textangular作为元素的视图.在Android(我测试过)上,如果键盘打开,视图不会向上滚动以防止编辑器进入键盘.我安装了Keyboard插件com.ionic.keyboard.

这是页面的结构:

<ion-view id="newblogview">
    <ion-nav-buttons side="left">
    ...
    </ion-nav-buttons>    
  <ion-content scroll="true" overflow-scroll="true" class="has-header" delegate-handle="mainScroll">  
     <iframe data-tap-disabled="true" style="width: 100%; min-height: 100%"  src="./templates/blog/html/blog-editor.html" name="blogeditor" id="blogeditor"></iframe>                
  </ion-content>
</ion-view>

通过聚焦输入打开键盘时,它不会向上移动.我试过android:windowSoftInputMode ="adjustPan"以及"adjustResize"而且我也尝试过native.keyboardshow事件来调用$ ionicScrollDelegate.scrollBottom(true);

我认为我们已经为页脚添加了键盘附加指令,但是我无法在页脚中放置文本编辑器.离子框架是否支持调整键盘显示/隐藏的离子含量？是否在框架中不支持此功能或我错过了什么.

这个问题类似于另一个主题,但没有接受的答案.

请帮忙.-Prakash.

我有两个嵌套状态,由父抽象状态和子状态组成:

.state('app.heatingControllerDetails', {
                url: "/clients/:clientId/heatingControllers/:heatingControllerId",
                abstract: true,
                views: {
                    'menuContent': {
                        templateUrl: "templates/heatingController.html",
                        controller: 'HCDetailsCtrl'
                    }
                }
            })
.state('app.heatingControllerDetails.wdc', {
                url: "/wdc",
                views: {
                    'hc-details': {
                        templateUrl: "templates/heatingControllers/wdc.html",
                        controller: 'WdcDetailsCtrl'
                    }
                },
                resolve:{
                    hcFamily: [function(){
                        return 'wdc';
                    }]
                }
            })

和两个控制器是:

   .controller('HCDetailsCtrl',function($scope){
        $scope.$on("$ionicView.enter", function (scopes, states) {
        ...
        });
     })
    .controller('WdcDetailsCtrl',function($scope){
        $scope.$on("$ionicView.enter", function (scopes, states) {
        ...
        });
     })

当我调用状态app.heatingControllerDetails.wdc时,会创建两个控制器,但仅在父控制器上调用$ ionicView.enter.任何的想法？

在heatingController.html中,hc-details视图定义如下:

<ion-content class="has-header" ng-show="hc">
    <div ui-view name="hc-details"></div>
    <div class="disableContentDiv" ng-hide="hc.state=='Online'"></div>
</ion-content>

我正在使用以下控制器,以便在dashboard页面android后退按钮退出应用程序,但在其余页面上它返回.从dashboard页面之前我有一个教程我只向我的用户呈现一次,然后我不得不重写android后退按钮,dashboard如果按下它退出,它可以正常使用此代码:

angular

  .module('az-app')
  .controller('DashboardController', function ($scope, $state, $ionicPlatform) {

    /**
     * While user on dashboard.html we don't want Android back button to return
     * to tutorial views so we override it so that in case that back button is pressed
     * to exit app which is in accordance with android lifecycle.
     *
     */
    $ionicPlatform.registerBackButtonAction(function () {
       if($state.is('/dashboard') || $state.is('dashboard')){
        navigator.app.exitApp();

       }
    }, 100);


  });

现在的问题是,当我转到以下视图时,它仍然可以作为退出按钮,但我希​​望它只是一个不是仪表板的任何其他视图中的后退按钮,所以我在以下控制器中尝试了这个:

angular

  .module('az-app')
  .controller('DirMedicoController', function ($scope, $state, $ionicPlatform) {

    $ionicPlatform.registerBackButtonAction(function …

我有一个在1分钟后更新的视图,我在离开此视图之前停止计时器,一切正常.返回当前视图后,计时器不会再次重启.

这是此视图的控制器的代码:

.controller('IndexCtrl', function($scope, $timeout, RestService) {
    var updateN = 60*1000;
    $scope.test = "View 1 - Update";
    var update = function update() {
         timer = $timeout(update, updateN);
         /** make a http call to Rest API service and get data **/
        RestService.getdata(function(data) {;
             $scope.items = data.slice(0,2);
         });
    }();

   /** Stop the timer before leave the view**/
    $scope.$on('$ionicView.beforeLeave', function(){
   $timeout.cancel(timer);
      //alert("Before Leave");
   });  

   /** Restart timer **/
    $scope.$on('$ionicView.enter', function(){
    $timeout(update, updateN);
      //alert("Enter");
   }); 
})

.controller('ViewCtrl2', function($scope) {

  $scope.test = "View 2";

});

我有一个离子侧菜单.我想添加background-image.Side -Menu代码如下.

<ion-side-menus enable-menu-with-back-views="true">
<ion-side-menu-content>
    <ion-nav-bar class="bar-dark">
        <ion-nav-back-button>
        </ion-nav-back-button>      
        <ion-nav-buttons side="left">
            <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>
        </ion-nav-buttons>
        <ion-nav-buttons side="right">
            <button  class="button button-icon button-clear ion-log-out" ng-click="logout()"></button>
        </ion-nav-buttons>          
    </ion-nav-bar>
    <ion-nav-view name="menuContent" style="background-color:red;">   
    </ion-nav-view>
</ion-side-menu-content>
    <ion-side-menu side="left">
        <ion-header-bar class="bar-dark">
            <h1 class="title">Menu</h1>
        </ion-header-bar>
        <ion-content>
            <ion-list>
                <ion-item menu-close href="#/app/dashboard">
                    <i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i>
                    Dashboard
                </ion-item> 
<ion-item menu-close href="#/app/dashboard">
                    <i class="icon icon-dashboard" style="font-size:20px;margin-right:10px;"></i>
                    Statistics
                </ion-item>             
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>

如何将背景图像添加到离子侧菜单

如何创建一个带+和 - 按钮的输入框.点击哪个用户可以更改所选产品的数量,例如此屏幕:

如何添加自定义图标离子2,我有svg文件,我需要在菜单中添加图标

this.pages = [
      {icon: 'Test', title: 'Logout', component: LoginPage }
    ];

    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        <ion-icon name="{{p.icon}}" svgversion item-left></ion-icon>
        {{p.title}}
      </button>
    </ion-list>

layout.scss

ion-ion[name="test"][svgversion] {
  content: url("../../img/accountsDeposits.svg");
}

我尝试了很多方法来去除离子卡中的边框，但都没有成功。请帮我。这是我的 css 文件：

   page-home {
     ion-card, .card-ios, .card-md {
        border: 0 !important;
        box-shadow: 0 !important;
        border: none !important;
        border-style: none !important;
        position: relative;
        text-align: center;
        // border-top: 3px solid colorofyourchosing
      }
      .card{
        border: 0 !important;
        box-shadow: 0 !important;
        border: none !important;
        border-style: none !important;
      }    }

这是我在 home.html 中的 html 代码

            <ion-card>
              <img (click)="goEnvi()" src="assets/imgs/envi.svg"/>
              <h6>{{"Enviroment" | translate}}</h6>
            </ion-card>

谢谢

我使用适用于visual studio 2015的新离子模板创建了一个基本应用程序.我想使用离子视图应用程序查看iPhone上的应用程序.我在哪里可以发出cli命令ionic upload？(PM控制台和console2拒绝它)

因为只在cmd中键入ionic不起作用,(无法识别的命令)我下载并安装了离子框架(即使VS2015离子中的所有东西都工作正常).然后,如果我运行离子上传,我会收到一个错误:

ordovaProject4\www>ionic upload

TypeError: Invalid Version: Not installed
    at new SemVer (C:\Users\3stra\AppData\Roaming\npm\node_modules\ionic\node_mo
dules\semver\semver.js:295:11)
    at Range.test (C:\Users\3stra\AppData\Roaming\npm\node_modules\ionic\node_mo
dules\semver\semver.js:1049:15)
    at Function.satisfies (C:\Users\3stra\AppData\Roaming\npm\node_modules\ionic
\node_modules\semver\semver.js:1098:16)
    at Object.checkRuntime (C:\Users\3stra\AppData\Roaming\npm\node_modules\ioni
c\node_modules\ionic-app-lib\lib\info.js:295:32)
    at Object.run (C:\Users\3stra\AppData\Roaming\npm\node_modules\ionic\lib\cli
.js:54:10)
    at Object.<anonymous> (C:\Users\3stra\AppData\Roaming\npm\node_modules\ionic
\bin\ionic:9:10)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)
    at node.js:814:3

Invalid Version: Not installed (CLI v1.6.4)

Your system information:

Cordova CLI: …

在使用Ionic Framework登录/注销后浏览清除历史记录和重新加载页面

我想知道同样的问题,但对于ionic2使用打字稿.

在登录和注销时我需要重新加载app.ts,因为有些类在构造上运行库.

它基本上会重定向到家并重新加载.