Question

我已动态更改$ scope变量，但Ionic doens检测不到变化：

在我的控制器中：

$scope.something = "something" ;

在我的离子盒中，我看到了$ scope.something，但是当尝试将新值设置为$ scope.something时，离子滑动框并没有检测到变化。如果我这样做了新值已经设置..

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

很多人说使用$ ionicBoxDelegate.update（）就足够了，但对我来说并不起作用。我也抨击了我在互联网上看到的所有选项，但没有办法。

我的代码有效，因为如果我将它移动到普通视图，从幻灯片中运行，运行正常。在同一个控制器上使用相同的代码。

是个谜。有什么想法吗？

Answer 1

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

Answer 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>

JS

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

Answer 3

查看代码，尤其是更新$scope.something的方式非常有用。

我在下面创建了代码段（松散地基于Scott Whittaker's codepen）。这是你正在努力实现的目标：

＆＃13;

    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"
         }
       };
    })

＆＃13;

.slider {
  height: 300px;
  background-color: #eee;
}

.box {
  padding: 1em;
}

＆＃13;

    <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>

＆＃13;

Answer 4

问题是该模型需要一个点。因为我在过滤器和输入中使用它。

如何在Ionic幻灯片盒中更新$ scope？

4 个答案: