ng-switch using on attribute failing after upgrade

Colin Bester

unread,

Nov 10, 2017, 2:07:51 PM11/10/17

to Angular and AngularJS discussion

I have upgraded project to use angular 1.6.6 and after upgrade my ng-switch on="..." elements no longer work althought ng-switch="..." does work.

According to docs it should work with or without the on attribute but am concerned that it doesn't work when including the on attribute as it may indicate some other issue.

Suggestions appreciated.

<!-- testme set in controller -->

<!-- doesn't work, rendered output includes neither of the two switches -->
<div ng-switch on="testme">
  <div ng-switch-when="1">....</div>
  <div ng-switch-default>....</div>
</div>

<!-- does work as expected -->
<div ng-switch="testme">
  <div ng-switch-when="1">....</div>
  <div ng-switch-default>....</div>

</div>

Sander Elias

unread,

Nov 11, 2017, 2:24:10 AM11/11/17

to Angular and AngularJS discussion

Hi Colin,

If I put the below code in a plunker, they both work for me.

<!DOCTYPE html>
<html>
<head>
  <script data-require="angul...@1.6.5" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>
<body ng-app ng-init="testme=1">
  <h1>Hello Plunker!</h1>
  <div ng-switch on="testme">
    <div ng-switch-when="1">one one</div>
    <div ng-switch-default>one none</div>
  </div>

  <div ng-switch="testme">
    <div ng-switch-when="1">two one</div>
    <div ng-switch-default>two none</div>
  </div>
</body>
</html>

So you might have a different issue. Perhaps you did declare an `on` directive somewhere else in your app or something like that?

Regards

Sander

Colin Bester

unread,

Nov 11, 2017, 7:31:07 AM11/11/17

to ang...@googlegroups.com

It does appear as if there’s a conflicting directive as there is no reason I can see for it not working working but no I have no ‘on’ directive defined. Also even more confusing it worked with older angular version which is actually in production.

I am using angular with bootstrap and liftweb, both of which have been updated as well which may inadvertently be an issue (but would be surprised if they were cause).

Sent from my iPhone

--
You received this message because you are subscribed to a topic in the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/_dwjGEUNNuI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Colin Bester

unread,

Nov 11, 2017, 7:33:43 AM11/11/17

to ang...@googlegroups.com

Also note that this is not the actual code, it just demonstrates behavior I’m seeing. Actual code is pretty much the same and switch variable is returning string.

Sent from my iPhone

On Nov 11, 2017, at 1:24 AM, Sander Elias <sande...@gmail.com> wrote:

Sander Elias

unread,

Nov 11, 2017, 7:46:26 AM11/11/17

to Angular and AngularJS discussion

Hi Colin,

Perhaps the 'on' part is consumed by one of your 3rth party stuff. I think you are safe if you switch to `ng-switch="..."` as that s the preferred way anyway.

Regards

Sander

Colin Bester

unread,

Nov 11, 2017, 7:49:25 AM11/11/17

to ang...@googlegroups.com

It could be and am trying to search for any such occurrence but I’d really be surprised. For now I have dropped using ‘on’ as I didn’t like it anyway

~C

Colin Bester

unread,

Nov 11, 2017, 8:12:04 AM11/11/17

to Angular and AngularJS discussion

The plot thickens....

In effort to track down 'on' attribute not working I modified angular's ngSwitch directive, changing attr.on to attr.ona as well as adding console log displaying trigger of $watch, and html code to

<ng-switch ona="testme">


 <div ng-switch-when="1">one one</div>
 <div ng-switch-default>one none</div>

</ng-switch>

This displayed same output as using "on" attribute

watch expression undefined
watch expression triggered undefined

I then changed (in angular.js) attr.on to attr.onabc thinking this pretty unlikely to be used elsewhere and updated html code to:

<ng-switch onabc="testme">


 <div ng-switch-when="1">one one</div>
 <div ng-switch-default>one none</div>

</ng-switch>

Still shows the undefined messages.

Then edited angular's directive attr.on to attr.aonabc and made corresponding change in html code and the switch works and debug output as expected.

watch expression testme
watch expression triggered 1

Then for giggles I changed attr.on to attr.onabc123zxc and I saw the undefined messages again.

Colin Bester

unread,

Nov 13, 2017, 11:31:27 AM11/13/17

to Angular and AngularJS discussion

Problem solved, or at least identified. 'Problem' came about due to changes in Liftweb - see https://groups.google.com/d/msg/liftweb/JmAjy9f-Gjo/IXUNW2H2AAAJ

Reply all

Reply to author

Forward