如何在 Ionic 幻灯片框中更新 $scope？答案

【问题标题】：How to update $scope in Ionic slide box?如何在 Ionic 幻灯片框中更新 $scope？
【发布时间】：2016-03-02 19:46:35
【问题描述】：

我已经动态更改了 $scope 变量，但 Ionic 没有检测到更改：

在我的控制器中：

$scope.something = "something" ;

在我的 ion-box 中，我看到了 $scope.something，但是当尝试为 $scope.something 设置新值时，离子滑动盒没有检测到更改。如果我这样做了，新值已经设置好了..

console.log($scope.something) // The new value

很多人说 $ionicBoxDelegate.update() 就足够了，但对我不起作用。我也绑定了我在网上看到的所有选项，但没有办法。

我的代码可以正常工作，因为如果我将其从幻灯片移到普通视图，运行良好。对相同的控制器使用相同的代码。

是个谜。有什么想法吗？

【问题讨论】：

标签： angularjs ionic-framework

【解决方案1】：

如果范围没有正确更新，您可以使用 $scope.$apply() 强制 Angular 重新评估范围。

【讨论】：

【解决方案2】：

我刚做了一个codepen。这会有帮助吗？

http://codepen.io/nabinkumarn/pen/obVbmN

HTML

<div ng-controller="SlideBoxController as vm">
        <div style="height:30px">{{vm.something}}</div>
        <ion-slide-box show-pager="true" on-slide-changed="vm.onSlideChanged($index)">
          <ion-slide ng-repeat="item in vm.items">
            <div class="box">
              <h2>{{item.title}}</h2>
              <p>{{item.desc}}</p>
            </div>
          </ion-slide>
        </ion-slide-box>
</div>

vm.something=1
  vm.onSlideChanged = function(slideIndex) {
        vm.something ++;
  };

【讨论】：

【解决方案3】：

查看您的代码会很有用，尤其是您如何更新$scope.something。

我在下面创建了 sn-p（大致基于 Scott Whittaker's codepen）。这是您想要完成的任务吗：

    angular.module('app', ['ionic'])
    
    .controller('SlideBoxController', function($scope) {  
     
      $scope.something = "old value";
      
      $scope.items = 
        [{title: "item 1", desc: "item 1 description"}, 
         {title: "item 2", desc: "item 2 description"}
        ];
    
       $scope.onSlideChanged = function(slideIndex) {
         if (slideIndex === 1) {
             $scope.something = "new value";
         }
         else
         {
             $scope.something = "old value"
         }
       };
    })

.slider {
  height: 300px;
  background-color: #eee;
}

.box {
  padding: 1em;
}

    <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">     
        <title>Ionic Slide Box</title>
        <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
        <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>    
      </head>
      <body>
        <ion-header-bar class="bar bar-header bar-calm">
            <h2 class="title">Slide Box</h2>
        </ion-header-bar>  
        <ion-content scroll="false">
          <div ng-controller="SlideBoxController">
            <ion-slide-box show-pager="true" on-slide-changed="onSlideChanged($index)">
              <ion-slide ng-repeat="item in items">
                <div class="box">
                  <h3>$scope.something = {{something}}</h3>
                  <h2>{{item.title}}</h2>
                  <p>{{item.desc}}</p>
                </div>
              </ion-slide>
            </ion-slide-box>    
          </div>
        </ion-content>  
      </body>
    </html>

【讨论】：

我不想在 SlideChange 上更改 $scope，我有一个搜索输入，当我写一个列表时，当用户单击
时，会出现与输入文本匹配的单词元素，我想用
.