Randy Hall Randy Hall - 1 month ago 8
AngularJS Question

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?

Answer

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