unrecognized expression on browserLink

Question

I get some mistake about " browserLink " see this below

<div ng-show="optList.editing && optList.BANKRUPT_FLG != 'Y' && (optList.OPT != 'TF' || (optList.OPT == 'TF' && optList.ONCESMART_ID == '-1'))">
  <input />
</div>

It's Ok..

But

<div ng-show="optList.editing && optList.BANKRUPT_FLG != 'Y' && (optList.OPT != 'TF' || (optList.OPT == 'TF' && optList.ONCESMART_ID == '-1'))">
  <input type="text"/>
</div>

When i add type="text" on input tag i will get

Uncaught Error: Syntax error, unrecognized expression:

div:has(input[type='text'])[ng-show='optList.editing && optList.BANKRUPT_FLG != 'Y' && (optList.OPT != 'TF' || (optList.OPT == 'TF' && optList.ONCESMART_ID == '-1'))']

Can someone tell me , How to solve this error please ?

FYI : Google Chrome (48.0.2564.97)
Microsoft Visual Studio Professional 2015 (14.0.23107.156)
Web Essentials 2015.1 (1.0.203)

Answer 1

There is a bug in Browser Link that is causing this problem. You should be able to work around it by adding an ID attribute to the <div> tag.

Browser Link creates jQuery expressions to try to uniquely identify tags in your page. In this case, it is trying to use the ng-show expression, because nothing else about the tag is unique enough. But the ng-show expression is obviously too complex for that purpose. It should have been ignored for that reason, but somehow it is beating the check that should've disqualified it.

Browser Link would rather use a unique ID or class, if one exists. By providing that, you can prevent it from considering the ng-show attribute.

Answer 2

I had no DIV tag, so I simply disabled Browser Link in Visual studio and the error went away. There are reports of Browser Link causing problems when running AngularJS apps in Visual Studio.

To disable, simply uncheck the “Enable Browser Link” option.

I was pointed to this solution and there are more details in the answer here: ng-show > 10 throws syntax error (VS browser link)