I am using Angular for a VisualForce page but would still like to leverage some of the VisualForce components that it provides.

For example I have a lookup bound to an angular variable

<apex:inputField value="{!case.Caller__c}" 
      html-ng-model="case.Caller__c" html-ng-change="handleOnChange()"/>

but this only returns the name value of the record, not the Id.

Is there anyway to get the Id of the record instead of the name? Or how do most people implement lookup fields within their framework?

  • You can try with apex:inputText instead of apex:inputField. – Ana Jul 12 '17 at 17:54

Answering more broadly, I think you'll get nothing but trouble trying to embed AngularJS attributes onto VisualForce elements. That doesn't mean you can't ever use AngularJS on a VF page, but they shouldn't be fighting over the same DOM elements. Also versions of Angular JS from 1.4.x upwards fight with the syntax VisualForce uses to formulate its auto-generated element IDs, which makes it impossible to have any Angular-tagged elements inside an apex:form.

VisualForce knows, in the view state, what the actual ID value of that lookup is. But it's not storing it in that DOM element. If you use "Inspect Element" in your browser and watch what happens when you select a new record from the lookup, you'll see that the visible lookup field is one input element, but there is also a hidden input preceding it with the same ID plus _lkid. The value of that field is the record ID. But none of the attributes you place on apex:inputField are going to flow through to that hidden input. So the AngularJS model of passively scanning for updates ain't gonna work here.

Also beware of the use of rerender in mixed VF/AngularJS. If VF rerenders a section by AJAX which was previously bound to AngularJS, Angular will not be happy.

| improve this answer | |
  • I'm actually moving away from visual force. The requirements for this feature are too complex for visual force. – TemporaryFix Jul 12 '17 at 15:37
  • 1
    Fair enough. FYI the best model for using AngularJS in VF is to use the various available JavaScript Remoting methods. If you're going with Angular in the first place, you don't want VF to construct the DOM for you - that should be Angular's job. VF/Apex should just supply the data for you to render as desired. – Charles T Jul 12 '17 at 15:42
  • We wrote a pretty dynamic service for using Force Remoting, but if I can save time by using out of the box I really want to leverage that. I'm just going to substitute the lookup with a typeahead. – TemporaryFix Jul 12 '17 at 15:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.