I am new to AngularJS. The problem I am having is that I am changing a variable on my visualforce controller, yet AngularJS does not change.

Here is my angular controller:

// On Visualforce Page
app.controller('MainController', function($scope) {
   this.products = {!products_JSON};
   $scope.ngUpdateAmazon = function(prod_id, amaz_id) {
      updateAmazon(JSON.stringify(prod_id), JSON.stringify(amaz_id));

Where products_JSON is a variable on the controller:

// On Controller
public String products_JSON { get { return JSON.serializePretty(products); } set; }

And products is a List of sObjects that will remain undisclosed. The ngUpdateAmazon function goes through an apex:actionFunction that goes to a void method on the controller. That void method on the controller updates products and refreshes products_JSON with the new value of products.

Here is my issue: when products_JSON is changed, even though it is directly represented as a variable in the AngularJS controller, the page does not change to represent the variable's change.

Example: I change I field of products from "Test_A" to "Test_B" and run the command:

// On Controller
this.products_JSON = JSON.serializePretty(products);

yet nothing changes on the visualforce page.

Any help would be appreciated. Note that a table is being generated from these variables, and I don't want that whole table to refresh.

  • Just as an aside, you have a cross site scripting vulnerability here because {!products_JSON} is not escape and not quoted. Please instead set this to 'this.products = JSON.parse('{!JSENCODE(products_JSON)}');. As to your question, server side rendering happens on page load, not during live updates. It is useful for pre-populating pages to save 1 round trip, but subsequent updates should be handled with xhrs. – Robert Sussland Dec 23 '16 at 22:03

The expression:

this.products = {!products_JSON};

will be translated into text by the server when the Visualforce page is first generated:

this.products = [{...}, {....}, ...];

and then when that text is loaded into the browser, the browser's JavaScript interpreter will initialize the products variable to the JavaScript object that the JSON represents.

The apex:actionFunction updates the controller variable but (presumably) does not result in the part of the page that has the JavaScript this.products = ... assignment in it being regenerated so there is no change to the JavaScript variable. In an Angular app you would normally return a JavaScript result when you make a JavaScript call to the server and assign that to a JavaScript variable rather than re-render part or all of the page to get the update.

| improve this answer | |
  • Could you possibly supply an example of what you mean by "In an Angular app you would normally..." I tried creating an angular function to reset the this.products variable, in a sense, but that also did not do anything. How can I return a result from the controller through the apex:actionFunction, in a sense, and to the function call in the Angular controller? – Konnor McDowell Dec 23 '16 at 22:24
  • @KonnorMcDowell Calls like apex:actionFunction aren't much use in this situation; see e.g. How to develop Salesforce Visualforce apps using AngularJS ? for alternatives. – Keith C Dec 23 '16 at 22:39

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.