"Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column" Angular with Visualforce

Question

I am trying some code related to Angular with Visualforce. Here I am trying to implement modal in https://angular-ui.github.io/bootstrap/#/modal

Now when I use a templateURL and give a new apex as url, then I get the error mentioned in subject.

Code snippet for angular template -

$scope.open = function() {
           var modalInstance = $uibModal.open({
            animation: $scope.animationsEnabled,
            templateUrl: '/apex/newProjectForm',
            controller: 'ModalInstanceCtrl',
            size: 'lg',
            resolve: {
              items: function () {
                return $scope.list5;
              }
            }
          });

           modalInstance.result.then(function (selectedItem) {
            console.log('2-->', $scope.user);

          }, function () {
            $log.info('Modal dismissed at: ' + new Date());
          });
      }

For the newProjectForm.apge -

<apex:page showHeader="false" controller="NewProjectController">
    <style type="text/css">
    body {
        min-width: 200px;
    }
    </style>
    <apex:form>
        <apex:pageBlock>
            <apex:pageBlockSection>
                <apex:inputField value="{!projectInstance.Name}"></apex:inputField>
                <apex:inputField value="{!projectInstance.Start_Date__c}"></apex:inputField>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>

</apex:page>

I understand somehow angular is not able to understand the colon : in "apex:inputfield", but not sure that how I can solve it.

Update 1 ok, I checked again and I cannot find mark up of modal in page. not sure how angular loads it internally

Update 2 The actual only seems to be because of Salesforce way to putting id to elements. so I gave Ids to apex:page as well as apex:form so the error that I am getting is -

Syntax Error: Token ':' is an unexpected token at column 13 of the expression [completePage:completeForm] starting at [:completeForm].

Where "completePage" is id of page and "completeForm" is the id of form.

Thanks,

Ray

Answer 1

This is a problem caused by AngularJS using jQuery and appears to be a known limitation (see issue 13771); jQuery treats colons as special selectors so ids with colons break the parser. Your options are to either override the form directive or move the apex:form tag outside of your Angular app, which is what I did.

Answer 2

The way I solved it is to use a built in Angular directive that tells Angular to not parse that element.

The directive is called ng-non-bindable. You can put it on any element that you do not want parsed.

<apex:form html-ng-non-bindable="true" id="theForm">