CODEWITHSUNDEEP
angularjsangularjs-directive
olanod
olanod

Reputation: 30586

ngSwitch slider directive not working

I'm trying to create a slider directive inpired by this example using ngSwitch and ngAnimate but without success. There is a timeout calling the next function that increments the scope.current variable and ngSwitch should use this variable to switch images. 

<div class="slider">
    <img src="..." />
    <img src="..." />
    <img src="..." />
</div>

Here is my plunker with the example. I think it is something related with the scope(its always you scope). UPDATE: I did some progress, I moved the attributes manipulation to the compile function and it seems it helped a bit but now I get an error: No controller: ngSwitch.
new plunker

Upvotes: 1

Views: 602

Answers (2)

user1498724
user1498724

Reputation: 206

I have a workaround using ng-if instead of ng-switch, see here.

If you want to stick around using ng-switch, I would suggest you give a closer look to the scope created by ng-switch (see this).

Upvotes: 1

zs2020
zs2020

Reputation: 54532

The reason why Angularjs shows the error No controller: ngSwitch is because ng-switch-when depends on ng-switch. So you should add the attribute of ng-switch-when when the ng-switch scope is created. The easiest way is to use $observe on the ngSwitch.

Here is one way to make the compile work

  attrs.$observe('ngSwitch', function () {
      for (i = _i = 0, _len = pages.length; _i < _len; i = ++_i) {
          page = pages[i];
          page.setAttribute('ng-switch-when', i);
      }
  });

However the animation will not work since you can't access the current value due to the new scope ng-switch created.

In order to make the directive work, I think the easiest way is to declare the ng-switch="current" in the template so the directive can access to the the value it watches on.

Hope it can shed some light on.

Upvotes: 1

Related Questions