Scope is not defined error

Question

I am implementing an Slide Box and tried to use SlideHasChanged Event.

There are some examples in the internet but I have always the same error.

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

I can switch the slides arround.

In my 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;
}
};

Now it should work. And write to the log.

But I always get an $scope is not defined error.

UPDATE:

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>

score 0 · Answer 1 · answered Mar 06 '17 at 11:00

0

You need to defined a controller and inject $scope variable then its working fine

Eg code

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>

answered Mar 06 '17 at 11:00

Gaurav Kumar Singh

1,550
3
11
31

I changed as you sad, but it´s not working. Should it work with your example code when i gave the controller the same name in HTML an controller? and I replaced the App name with mine. – ritterderkokusnuss Mar 06 '17 at 12:20
[$injector:nomod] Module 'tracktorv2' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. – ritterderkokusnuss Mar 06 '17 at 12:30
[ng:areq] Argument 'controller1' is not a function, got undefined – ritterderkokusnuss Mar 06 '17 at 12:31
can you please remove 'tracktorv2' module then test this, controller name will be same in controller file and html – Gaurav Kumar Singh Mar 06 '17 at 12:47
Looks like this now? angular.controller('controller1', function($scope) { $scope.slideChanged = function(index) { – ritterderkokusnuss Mar 06 '17 at 12:51
my first error now is angular.controller is not a function – ritterderkokusnuss Mar 06 '17 at 12:53
the second is Argument 'controller1' is not a function, got undefined – ritterderkokusnuss Mar 06 '17 at 12:53
yes `angular.controller` not a function, can you please see my answer. `angular.module('appName').controller` is function – Gaurav Kumar Singh Mar 06 '17 at 12:54

score 0 · Answer 2 · answered Mar 07 '17 at 04:42

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>

Scope is not defined error

2 Answers2