angularjs - 范围未定义错误

Question

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

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

我的应用程序：

    <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 is not defined 错误。

更新：

应用程序.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

应用程序.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>