小编Wil*_*ris的帖子

谷歌地图不使用ionic/angular2显示

我正在使用ionic2来显示谷歌地图.但是当我运行下面的代码时,我得到空白页面.

export class NearByStoresPage {

  constructor(private nav: NavController, private confData: ConferenceData) {
    this.loadNearByOffers();
  }

  loadNearByOffers(){

    let options = {timeout: 10000, enableHighAccuracy: true};

    navigator.geolocation.getCurrentPosition(

        (position) => {
            let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);               

            let mapOptions = {
                center: latLng,
                zoom: 16,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            let map = new google.maps.Map(document.getElementById("map"), mapOptions);

            let marker = new google.maps.Marker({
              map: map,
              animation: google.maps.Animation.DROP,
              position: map.getCenter()
            });

            let content = "<h4>Information!</h4>";          

            let infoWindow = new google.maps.InfoWindow({
              content: content
            });

            google.maps.event.addListener(marker, 'click', function(){
              infoWindow.open(map, marker);
            });
        }, …
Run Code Online (Sandbox Code Playgroud)

ionic2 angular

16
推荐指数
1
解决办法
869
查看次数

离子2:如何从Android设备获取控制台消息

我正在通过我的Android手机部署调试版本ionic run android.

如何查看console.log邮件?

android adb ionic2

14
推荐指数
1
解决办法
1万
查看次数

禁用侧面菜单的滑动以打开Ionic 2中的登录页面(或任何页面)的手势

我是Ionic 2和Angular2的新手,我已经使用以下命令下载了一个新的Ionic模板

 Ionic start appname sidemenu --v2 --ts
Run Code Online (Sandbox Code Playgroud)

对于这个特定的解决方案,我添加了一个登录页面来验证用户.验证成功后,用户将导航到使用侧边菜单的菜单页面.

由于解决方案基于sidemenu模板,因此只要用户向左滑动,就会在登录页面上显示侧边菜单.

那么有人可以指导我纠正这个错误,并在浏览视图时停止显示侧边菜单.

我的代码

App.ts文件

import {App, IonicApp, Platform,MenuController} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HelloIonicPage} from './pages/hello-ionic/hello-ionic';
import {ListPage} from './pages/list/list';
import {HomePage} from './pages/home/home';


@App({
  templateUrl: 'build/app.html',
  config: {} // http://ionicframework.com/docs/v2/api/config/Config/
})
class MyApp {
  // make HelloIonicPage the root (or first) page
  rootPage: any = HomePage;
  pages: Array<{title: string, component: any}>;

  constructor(
    private app: IonicApp,
    private platform: Platform,
    private menu: MenuController
  ) {
    this.initializeApp();

    // set …
Run Code Online (Sandbox Code Playgroud)

menu ionic2 angular

9
推荐指数
1
解决办法
5334
查看次数

使用$ stateProvider的AngularJS/Ionic路由 - 控制器在第二次调用状态时不会重新加载

原始问题

我正在开发一个使用Ionic Framework和AngularJS的移动应用程序,我遇到的问题是控制器在初始化后没有重新加载.

其中一个状态转换(从'app.postbox-details''app.audit-questions')应该将参数传递给'app.audit-questions'控制器,但是该控制器不会使用新参数更新自身,因为它没有重新加载.

代码示例

app.js文件 - 配置

angular.module('sf-maintenance', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova'])           
.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
    $stateProvider
       .state('home', {
           url: '/home',
           templateUrl: 'templates/home.html',
           controller: 'HomeCtrl',
       })
       .state('app', { //app state being the side-menu
           url: '/app',
           abstract: true, //means that this state will never be activated directly, users will always go to a child state instead.
           templateUrl: 'templates/side-menu.html',
           controller: 'MenuCtrl'
       })       
       .state('app.postbox-details', {
           url: '/postbox-details',
           views: {
               'menuContent': {
                   templateUrl: 'templates/postbox-details.html',
                   controller: 'PostboxDetailsCtrl' …
Run Code Online (Sandbox Code Playgroud)

javascript url-routing angularjs hybrid-mobile-app ionic-framework

5
推荐指数
1
解决办法
2万
查看次数

如何使用TypeScript在Ionic 2中获取设备ID

我试图使用typescript在ionic2中获取设备ID.

我安装了cordova-plugin-device

我的代码是......

platform.ready().then(() => {
   console.log(device.cordova);
}
Run Code Online (Sandbox Code Playgroud)

但这不起作用.

当我在设备上启动应用程序时,没有任何日志.

请帮我.

谢谢!

phonegap-plugins typescript ionic2

5
推荐指数
1
解决办法
5827
查看次数

未捕获的TypeError:拖动Google Map时无法读取null的属性'ca'

我有一个使用Google Maps JavaScript API的Ionic 2 beta 7应用程序(也发生在Beta 6中).

如果我在地图上单击,拖动它并在释放单击之前"抛出"地图,它会在下次拖动地图时尝试发生此错误.

这是JavaScript堆栈跟踪

TypeError:无法在对象的.r.Kj(https://maps.googleapis.com/maps-api-v3/api/js/25/7/common.js:215:70)读取null的属性'ca' .dy上的.B.trigger(https://maps.googleapis.com/maps/api/js?key=MYKEY:93:119)(https://maps.googleapis.com/maps-api-v3/api/ js/25/7/common.js:164:140)at.(https://maps.googleapis.com/maps-api-v3/api/js/25/7/common.js:163:441)在对象._.B.trigger(https://maps.googleapis. com/maps/api/js?key = MYKEY:93:119)at .r.dl(https://maps.googleapis.com/maps-api-v3/api/js/25/7/common.js: 228:350)在Kv.Zonerlegate.invokeTask上的.r.fm(https://maps.googleapis.com/maps-api-v3/api/js/25/7/common.js:195:106)(http:// localhost:8100/build/js/zone.js:356:38)在ZoneTask.invoke的Zone.runTask(http:// localhost:8100/build/js/zone.js:256:48)中(http:// localhost:8100/build/js/zone.js:423:34)

虽然从用户的角度来看似乎没有引起任何UI问题,但是知道是否有办法防止这种情况发生会很好吗?

注意

拖动地图并在鼠标静止时释放它,在下一次拖动时不会发生此错误.

Plunker示例

我创建了一个Plunker示例来复制问题.跟着这些步骤:

  1. 开放Developer Tools(F12)
  2. 拖动并抛出地图
  3. 再次尝试并拖动地图
  4. 抛出错误并写入控制台

更新

问题堆栈跟踪和标题已更新,以匹配Ionic 2 beta 10中捕获的内容

跟踪GitHub

此问题已在ZoneJS GitHub页面上提出,因此您可以在此处进行跟踪

javascript google-maps-api-3 ionic2 zonejs angular

5
推荐指数
1
解决办法
708
查看次数

离子载玻片如何在离子1.2.4上起作用(或者它对1.2.4有效吗?)

我使用了文档http://ionicframework.com/docs/nightly/api/directive/ionSlides/,基本上使用了入门应用程序模板.我将html添加到模板中,并将js部分添加到我的控制器中,但是它给出了错误ReferenceError:fade未定义并且没有显示任何内容..

有没有人有1.2.4离子的工作离子幻灯片示例?我的假设是他们改变了一些东西,但还没有为它制作文档.

这是我使用的代码,我将js部分添加到控制器,将html添加到我的视图中.

$scope.options = {
  loop: false,
  effect: fade,
  speed: 500,
}
$scope.data = {};
$scope.$watch('data.slider', function(nv, ov) {
  $scope.slider = $scope.data.slider;
})
Run Code Online (Sandbox Code Playgroud)
<ion-slides  options="options" slider="data.slider">
  <ion-slide-page>
    <div class="box blue"><h1>BLUE</h1></div>
  </ion-slide-page>
  <ion-slide-page>
    <div class="box yellow"><h1>YELLOW</h1></div>
  </ion-slide-page>
  <ion-slide-page>
    <div class="box pink"><h1>PINK</h1></div>
  </ion-slide-page>
</ion-slides>
Run Code Online (Sandbox Code Playgroud)

进入视图时,我收到此错误:

ReferenceError: fade is not defined
at new (controllers.js:22)
at invoke (ionic.bundle.js:17762)
at Object.instantiate (ionic.bundle.js:17770)
at ionic.bundle.js:22326
at self.appendViewElement (ionic.bundle.js:56883)
at Object.switcher.render (ionic.bundle.js:54995)
at Object.switcher.init (ionic.bundle.js:54915)
at self.render (ionic.bundle.js:56743)
at self.register (ionic.bundle.js:56701)
at updateView (ionic.bundle.js:62357) …
Run Code Online (Sandbox Code Playgroud)

javascript angularjs swiper ionic-framework

2
推荐指数
1
解决办法
6654
查看次数

Ionic - 分页被新的 ion-slides 组件(Swiper)隐藏

我使用的是ion-slides其采用组件(离子V1.2.4)组队,探索,我遇到的问题分页太多时(> 10)正在使用的幻灯片被隐藏。

我已经修改了这个JSFiddle来演示我遇到的问题,请注意,如果您从 HTML 中删除幻灯片,分页会相应地显示。

谁能告诉我如何强制分页仍然显示?


更新

正如@nico 所指出的,这是 Ionic 出于任何原因而实施的。他们可能应该使这个可配置,让开发人员决定是否在 10 张幻灯片后隐藏分页。

我下面的解决方案是目前的一种解决方法,但如果有人想要显示分页。

css angularjs swiper ionic-framework

1
推荐指数
1
解决办法
9077
查看次数