为什么 Ionic 不将内联 css 应用于动态新添加的 Ion 幻灯片？

Question

我正在尝试使用动态离子滑块实现离子滑块盒。我正在使用 ng-repeat（不知道是否应该在此处使用 collection-repeat）来乘以 <ion-slide> 并处理在幻灯片更改事件上添加新幻灯片，如下所示：

var i = 0;
$scope.slideHasChanged = function($index) {
    if($index == $scope.data.news.length - 1) {
        $scope.data.news.push({title:'Test '+(++i)});
        $ionicSlideBoxDelegate.update();
    }
}

它工作正常，但它会将新幻灯片推到当前聚焦的幻灯片下方并且它是可见的，这看起来很奇怪。

此外，当我从视图中删除每个父离子元素（如 <ion-view> 和 <ion-content> 并在整个页面中只保留 <ion-slide-box> 时，它工作正常而无需在下面推送新幻灯片，这是我不想要的，因为 <ion-view> 和 <ion-content> 背后还有其他逻辑？所以我的问题是 如何使幻灯片框在视图或内容标签下正常工作？

下面是我的非工作代码示例：

<ion-view hide-nav-bar="true">
   <ion-content class="row-center col-center">      
     <ion-slide-box on-slide-changed="slideHasChanged($index)" show-pager="false">
      <ion-slide ng-repeat="news in data.news">
            <h1>{{news.title}}</h1>
            <img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg" />
      </ion-slide>
    </ion-slide-box>        
</ion-content>
</ion-view>

（请注意，在我从页面中删除离子视图和内容后，幻灯片框可以正常工作）

更新
http://codepen.io/agupta1989/pen/MwGbOW?editors=101

在 Chrome 中经过几次试验和分析后，我发现在 on-slide-change 事件中，在控制器中，当我动态添加新幻灯片时，Ionic 无法在线应用 css到新添加的 <ion-slide>。请看下面：

<div class="slider-slides" ng-transclude="" style="width: 1080px;"> 
    <!-- ngRepeat: news in data.newsCards -->
<ion-slide ng-repeat="news in data.newsCards" class="slider-slide" data-index="0" style="width: 360px; left: 0px; transition-duration: 0ms; -webkit-transition-duration: 0ms; -webkit-transform: translate(-360px, 0px) translateZ(0px);">
    <!-- Content ommitted -->
</ion-slide><!-- end ngRepeat: news in data.newsCards -->
<ion-slide ng-repeat="news in data.newsCards" class="slider-slide" data-index="1" style="width: 360px; left: -360px; transition-duration: 0ms; -webkit-transition-duration: 0ms; -webkit-transform: translate(-360px, 0px) translateZ(0px);">
    <!-- Content ommitted -->
</ion-slide><!-- end ngRepeat: news in data.newsCards -->
<ion-slide ng-repeat="news in data.newsCards" class="slider-slide" data-index="2" style="width: 360px; left: -720px; transition-duration: 0ms; -webkit-transition-duration: 0ms; -webkit-transform: translate(0px, 0px) translateZ(0px);">
    <!-- Content ommitted -->
</ion-slide><!-- end ngRepeat: news in data.newsCards -->
<ion-slide ng-repeat="news in data.newsCards" class="slider-slide">
    <!-- Content ommitted -->
</ion-slide>
    <!-- end ngRepeat: news in data.newsCards -->

查看最后一个 <ion-slide>，它没有内联 css。是错误还是我做错了？

Answer 1

这是一个应该有帮助的示例，您可以更改最大幻灯片或使用集合重复（这样您就不会因为内存问题而导致应用程序崩溃）。编辑：这是现在没有包装的工作代码

HTML:

<title>Tabs Example</title>

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

<ion-nav-bar class="bar-positive">
  <ion-nav-back-button>
  </ion-nav-back-button>
</ion-nav-bar>

<ion-nav-view></ion-nav-view>


<script id="templates/tabs.html" type="text/ng-template">
  <ion-tabs class="tabs-icon-top tabs-positive">

    <ion-tab title="Home" icon="ion-home" href="#/tab/home">
      <ion-nav-view name="home-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
      <ion-nav-view name="about-tab"></ion-nav-view>
    </ion-tab>

    <ion-tab title="Contact" icon="ion-ios-world" ui-sref="tabs.contact">
      <ion-nav-view name="contact-tab"></ion-nav-view>
    </ion-tab>

  </ion-tabs>
</script>

<script id="templates/home.html" type="text/ng-template">
 <ion-view view-title="Home">
    <ion-content class="padding">
        <ion-slide-box delegate-handle="news-cards" 
        on-slide-changed="slideHasChanged($index)" show-pager="false" > 
        <ion-slide ng-repeat="news in data.newsCards">
          <h1>{{news.title}}</h1>
          <img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg" style="width:90%;"/> 
        </ion-slide> 
      </ion-slide-box>
   </ion-content>
  </ion-view>
</script>

<script id="templates/facts.html" type="text/ng-template">
  <ion-view view-title="Facts">
    <ion-content class="padding">
      <p>Banging your head against a wall uses 150 calories an hour.</p>
      <p>Dogs have four toes on their hind feet, and five on their front feet.</p>
      <p>The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.</p>
      <p>A cockroach will live nine days without it's head, before it starves to death.</p>
      <p>Polar bears are left handed.</p>
      <p>
        <a class="button icon ion-home" href="#/tab/home"> Home</a>
        <a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">More Facts</a>
      </p>
    </ion-content>
  </ion-view>
</script>

<script id="templates/facts2.html" type="text/ng-template">
  <ion-view view-title="Also Factual">
    <ion-content class="padding">
      <p>111,111,111 x 111,111,111 = 12,345,678,987,654,321</p>
      <p>1 in every 4 Americans has appeared on T.V.</p>
      <p>11% of the world is left-handed.</p>
      <p>1 in 8 Americans has worked at a McDonalds restaurant.</p>
      <p>3,200 is the absolute highest amount of money you can win on Jeopardy.</p>
      <p>101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don't die throughout the movie.</p>
      <p>
        <a class="button icon ion-home" href="#/tab/home"> Home</a>
        <a class="button icon ion-chevron-left" href="#/tab/facts"> Scientific Facts</a>
      </p>
    </ion-content>
  </ion-view>
</script>

<script id="templates/about.html" type="text/ng-template">
  <ion-view view-title="About">
    <ion-content class="padding">
      <h3>Create hybrid mobile apps with the web technologies you love.</h3>
      <p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
      <p>Built with Sass and optimized for AngularJS.</p>
      <p>
        <a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">Tabs Nav Stack</a>
      </p>
    </ion-content>
  </ion-view>
</script>

<script id="templates/nav-stack.html" type="text/ng-template">
  <ion-view view-title="Tab Nav Stack">
    <ion-content class="padding">
      <p><img src="http://ionicframework.com/img/diagrams/tabs-nav-stack.png" style="width:100%"></p>
    </ion-content>
  </ion-view>
</script>

<script id="templates/contact.html" type="text/ng-template">
  <ion-view title="Contact">
    <ion-content>
      <div class="list">
        <div class="item">
          @IonicFramework
        </div>
        <div class="item">
          @DriftyTeam
        </div>
      </div>
    </ion-content>
  </ion-view>
</script>

CSS:

 .slider {
  height: 100%;
}
.slider-slide {
  padding-top: 40px;
  color: #000;
  background-color: #fff;
  text-align: center;

  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
}

.slider-pager-page i{
}

JS:

  angular.module('ionicApp', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "templates/home.html",
          controller: 'HomeTabCtrl'
        }
      }
    })
    .state('tabs.facts', {
      url: "/facts",
      views: {
        'home-tab': {
          templateUrl: "templates/facts.html"
        }
      }
    })
    .state('tabs.facts2', {
      url: "/facts2",
      views: {
        'home-tab': {
          templateUrl: "templates/facts2.html"
        }
      }
    })
    .state('tabs.about', {
      url: "/about",
      views: {
        'about-tab': {
          templateUrl: "templates/about.html"
        }
      }
    })
    .state('tabs.navstack', {
      url: "/navstack",
      views: {
        'about-tab': {
          templateUrl: "templates/nav-stack.html"
        }
      }
    })
    .state('tabs.contact', {
      url: "/contact",
      views: {
        'contact-tab': {
          templateUrl: "templates/contact.html"
        }
      }
    });


   $urlRouterProvider.otherwise("/tab/home");

})

.controller('HomeTabCtrl', function($scope, $ionicSlideBoxDelegate) {
  $scope.data = {
            newsCards: []
    }
  $scope.$on('$ionicView.enter', function(event,state) {
        event.preventDefault();
        $scope.data.newsCards = [{title:'abc'},{title:'xyz'},{title:'pqr'},{title: '123', title: '1234', title:'hello'}];
        $ionicSlideBoxDelegate.$getByHandle('news-cards').update();
    });

    var i = 0;
    $scope.slideHasChanged = function($index) {
        if($index == $scope.data.newsCards.length-1 && $index < 6) {
            $scope.data.newsCards.push({title:'Dummy'+(++i)});
      console.log($scope.data.newsCards);
            $ionicSlideBoxDelegate.$getByHandle('news-cards').update();
        }
        else if($index == 6) {
      alert($index);
            $ionicSlideBoxDelegate.slide($index-1);
        }
    }
});

工作码笔：http://codepen.io/anon/pen/pJVNKz

Answer 2

最后，我得到了来自 angular 的 Swiper by Idangerous. It have very nice and rich set of API's, methods and events. Here is a link. Yes, I had to use $compile 服务来编译这些额外的幻灯片或 html 需要在用户滑动时动态推送。除了添加动态幻灯片外，我还设法编写了一些小算法来使用 removeSlides([0,1,2]) 清理现有幻灯片，并使用 appendSlides() 和 prependSlides() 添加新幻灯片，反之亦然。

为什么 Ionic 不将内联 css 应用于动态新添加的 Ion 幻灯片？

Why Ionic doesn't apply in-line css to dynamically newly added Ion slide?

angularjs

hybrid-mobile-app

ionic