angularjsvisual-studiosyntax-errorbrowser-link

ng-show > 10 throws syntax error (VS browser link)

I have a table cell that shows if there's more than 10 records. Part of my pagination. 

<td ng-show="totalRecords>10" colspan="5">
    <ul uib-pagination style="margin:0;" total-items="totalRecords" ng-model="currentPage" ng-change="pageChanged()"></ul>
</td>

Pretty straightforward. But here's the crazy - it throws the following error in Chrome: 

Uncaught Error: Syntax error, unrecognized expression: td[ng-show='totalRecords @ browserLink:37 
bc.error @ browserLink:37
bh @ browserLink:37
bp @ browserLink:37
...etc

I'll note that $scope.totalRecords is set to zero (0) in the controller. Setting it to other values doesn't change anything. Everything else in the controller works perfectly.

The following scenarios don't throw any error:

<td ng-show="totalRecords=10" colspan="5">...</td>
<td ng-show="totalRecords<10" colspan="5">...</td>
<td ng-show="totalRecords>9" colspan="5">...</td>
<td ng-show="totalRecords>=11" colspan="5">...</td>
<td ng-show="totalRecords" colspan="5">...</td>

Anyone have a guess as to why?

Solution

  • The problem is with Visual Studio's "browser link" feature which can cause problems with AngularJS. Based on some research I did about the error you are experiencing, it seems that people are recommending to disable the browser link feature in Visual Studio.

    http://connect.microsoft.com/VisualStudio/feedbackdetail/view/814546/browserlink-throws-an-exception-when-using-angularjs-and-binding-in-an-attribute-browserlink-does-not-like-in-a-html-attribute

    The following link includes a similar description of the error you have and a few ways to disable the browser link feature:

    http://www.telerik.com/forums/the-new-browser-link-feature-in-vs-2013-is-causing-an-error-when-detailtable-of-hierarchy-radgrid-is-expanded