ngSwitch slider directive not working

Question

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

You are adding directives in linking function. I think that is wrong because directives are compiled in 'compile' stage and returned linking function is called then. So adding more directives in the element in the linking function won't help. — Rishabh Singhal, Jul 27 '13 at 20:38
Also you will have to add css for actual effect because ng-animate just add classes to elements — Rishabh Singhal, Jul 27 '13 at 20:39
yes I know about the css, that will come later. Should I add the directive in the compile function? I'll test later. — olanod, Jul 28 '13 at 00:20

score 1 · Answer 1 · answered Aug 05 '13 at 23:45

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.

score 1 · Answer 2 · edited May 23 '17 at 12:20

1

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

edited May 23 '17 at 12:20

Community

1
1

answered Aug 11 '13 at 22:05

user1498724

206
2
5

ngSwitch slider directive not working

2 Answers2