Question

我正在实现一个幻灯片盒并尝试使用SlideHasChanged事件。

互联网上有一些例子，但我总是有同样的错误。

我的APP：

    <ion-slide-box on-slide-changed="slideHasChanged($index)">
      <ion-slide>
        <div class="box blue"><h1>BLUE</h1></div>
      </ion-slide>
      <ion-slide>
        <div class="box yellow"><h1>YELLOW</h1></div>
      </ion-slide>
      <ion-slide>
        <div class="box pink"><h1>PINK</h1></div>
      </ion-slide>
    </ion-slide-box>

我可以切换幻灯片。

在我的app.js中：

$scope.slideChanged = function(index) {
switch(index) {
case 0:
console.log('I am on slide 0');
break;
case 1:
console.log('I am on slide 2');
break;
}
};

现在它应该工作了。并写入日志。

但我总是得到$ scope未定义的错误。

更新：

app.js

angular.controller('appName', function($scope) {
$scope.slideChanged = function(index) {
switch(index) {
  case 0:
    console.log('I am on slide 0');
    break;
  case 1:
    console.log('I am on slide 1');
    break;
}
};
});

HTML

 <div ng-controller="controller1">
      <ion-slide-box on-slide-changed="slideHasChanged($index)">
        <ion-slide>
          <div class="box blue"><h1>BLUE</h1></div>
        </ion-slide>
        <ion-slide>
          <div class="box yellow"><h1>YELLOW</h1></div>
        </ion-slide>
        <ion-slide>
          <div class="box pink"><h1>PINK</h1></div>
        </ion-slide>
      </ion-slide-box>
      </div>

Answer 1

您需要定义一个控制器并注入$ scope变量，然后才能正常工作

例如代码

angular.module('appName').controller('controllerName', function($scope) {
  $scope.slideChanged = function(index) {
    switch(index) {
      case 0:
        console.log('I am on slide 0');
        break;
      case 1:
        console.log('I am on slide 2');
        break;
    }
  };
});

HTML

<div ng-controller="controllerName">
    <ion-slide-box on-slide-changed="slideHasChanged($index)">
      <ion-slide>
        <div class="box blue"><h1>BLUE</h1></div>
      </ion-slide>
      <ion-slide>
        <div class="box yellow"><h1>YELLOW</h1></div>
      </ion-slide>
      <ion-slide>
        <div class="box pink"><h1>PINK</h1></div>
      </ion-slide>
    </ion-slide-box>
</div>

Answer 2

app.js

app.controller('myController', function($scope,$ionicPlatform,$state) {

$scope.slideHasChanged = function($index) {
    switch($index) {
      case 0:
        console.log('I am on slide 0');
        break;
      case 1:
        console.log('I am on slide 1');
        break;
    }
};

});

HTML

 <div ng-controller="myController">
      <ion-slide-box on-slide-changed="slideHasChanged($index)">
        <ion-slide>
          <div style="width: 100px;height: 100px" class="box blue"><h1>BLUE</h1></div>
        </ion-slide>
        <ion-slide>
          <div style="width: 100px;height: 100px" class="box yellow"><h1>YELLOW</h1></div>
        </ion-slide>
        <ion-slide>
          <div style="width: 100px;height: 100px" class="box pink"><h1>PINK</h1></div>
        </ion-slide>
      </ion-slide-box>
      </div>

范围未定义错误

2 个答案: