ionische / eckige Broschüren-Anweisung - Vergrößern / Verkleinern-Schaltflächen funktionieren nicht

Question

Sep 04, 2014, 11:24 PM

angularjs ionic-framework javascript leaflet

ionische / eckige Broschüren-Anweisung - Vergrößern / Verkleinern-Schaltflächen funktionieren nicht

Ich habe einige Probleme mit den Standardschaltflächen zum Vergrößern / Verkleinern auf der Merkblattkarte. Alles funktioniert einwandfrei, wenn ich eine Seite direkt lade, aber wenn ich einen Zustand in einen Zustand ändere, in dem es sich bei der Direktive für Broschüren um Schaltflächen handelt, funktioniert dies einfach nicht. Hier gehts zum Beispiel

http: //codepen.io/anon/pen/JkyEg? editors = 101

Der Code

HTML

<html ng-app="app">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"/>
        <link href="http://code.ionicframework.com/1.0.0-beta.11/css/ionic.min.css" rel="stylesheet"/>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
        <title>Leaflet example</title> 
    </head>
    <body>
        <ion-nav-view></ion-nav-view>

        <script type="text/ng-template" id="locations.html">
          <ion-view title="Locations">
            <ion-content>
                <ion-list can-swipe="true">
                    <ion-item ng-click="locationOnClick(location)" class="item item-icon-left" ng-repeat="location in locations">
                        <i class="icon ion-location"></i>
                        <h2>{{location.name}}</h2>
                    </ion-item>
                </ion-list>
            </ion-content>
          </ion-view>
        </script>
        <script type="text/ng-template" id="location.html">
          <ion-view title="{{location.name}}">
            <ion-nav-bar class="bar-positive" animation="nav-title-slide-ios7">
                <a ui-sref="locations" class="button icon-left ion-chevron-left button-clear ">Locations</a>
            </ion-nav-bar>
            <ion-content>
                <leaflet height="480px"></leaflet>
            </ion-content>
        </ion-view>
        </script>
        <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
        <script src="http://code.ionicframework.com/1.0.0-beta.11/js/ionic.bundle.min.js"></script>
      <script src="http://tombatossals.github.io/angular-leaflet-directive/dist/angular-leaflet-directive.min.js"></script>
    </body>                                                                
</html>

JS

angular.module('app', [
  'ionic',
  'leaflet-directive'
])
  .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider
          .state('locations', {
              url: "/locations",
              templateUrl:"locations.html",
              controller: 'LocationsCtrl'
          })
          .state('location', {
              url: "/location/:locationId",
              templateUrl: "location.html",
              controller: 'LocationCtrl'
          });


      // if none of the above states are matched, use this as the fallback
      $urlRouterProvider.otherwise('/locations');

  })
.factory('locationService', function(){
  var _locations = [{
        id: 1,
        name: 'Sample location',
        lat: 50,
        lng: 50
      }];
  return {
    getAll: function(){
      return _locations;
    },
    getById: function(id){
      return _locations.filter(function(loc){ return loc.id === id; })[0];
    }
  }
})
.controller('LocationsCtrl', function($scope, $location, locationService){
  $scope.locations = locationService.getAll();

  $scope.locationOnClick = function(location){
    $location.path('/location/'+location.id);
  };
})
.controller('LocationCtrl', function($scope, $stateParams, locationService){
  $scope.location = locationService.getById($stateParams.locationId);
})