0

The data is being retrieved but is not updating the bind variables on the page below is the url to VF page that i am using .

https://vffiddle.herokuapp.com/945#

Please advise .

Thanks, Sandeep

Added from the link

<apex:page showHeader="true" sidebar="true">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
    <apex:remoteObjects jsNamespace="test" >
        <apex:remoteObjectModel name="Test__c" jsShorthand="TB" fields="Name,Id"> 
            <apex:remoteObjectField name="Email__c" jsShorthand="email"/>  
        </apex:remoteObjectModel>
    </apex:remoteObjects>
    <div ng-app="app" ng-controller="MyCtrl" >
        <input id="textid" type="text" placeholder="Search Text" ng-model="SearchText" />
        <button ng-click="searchRec();">Search</button>    
        <table >
            <tr >
                <th>
                    <span >emails</span>
                </th>
            </tr>
            <tr ng-repeat="x in emails">
                <td data-label="activity"  >
                    <span > {{ x.email}}</span>
                </td>
            </tr>
        </table>            
    </div>            
    <script>
    var app = angular.module('app', []);
    var lst=[];
    app.controller('MyCtrl', function($scope) {
        var en = new test.TB();
        $scope.searchRec = function(){
             alert('insidecalculateService');
            console.log($scope.SearchText); 
            en.retrieve({where:{email:{like:"%"+$scope.SearchText+"%"}},limit: 30 }, function(err, records, event){
                if(err) {
                    alert(err.message);
                }
                else {              
                    console.log('test:'+records[0].get("email"));
                    alert('test:'+records[0].get("email"));
                    records.forEach(function(record) {

                        lst.push({email:record.get("email")});
                    });
                }   
                $scope.calculateService();
            });  
        };
        $scope.calculateService = function(){ 
            console.log('insidecalculateService',lst);
            alert('insidecalculateService'+lst);
            $scope.emails=lst;
            $scope.SearchText='';
            //lst=[]; 
        };  
    });         
    </script>
</apex:page>
1
  • Please post your code here. Link only questions and answers are brittle and require extra effort from the community.
    – Adrian Larson
    Commented Oct 21, 2015 at 22:00

1 Answer 1

0

Here is the page/code from the link in the question changed to work with Contact so it can run without your Test__c custom object and with the critical fix added between the two // xxx comments towards the end:

<apex:page showHeader="true" sidebar="true">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
    <apex:remoteObjects jsNamespace="test" >
        <apex:remoteObjectModel name="Contact" jsShorthand="TB" fields="Name,Id"> 
            <apex:remoteObjectField name="Email" jsShorthand="email"/>  
        </apex:remoteObjectModel>
    </apex:remoteObjects>
    <div ng-app="app" ng-controller="MyCtrl" >
        <input id="textid" type="text" placeholder="Search Text" ng-model="SearchText" />
        <button ng-click="searchRec();">Search</button>    
        <table >
            <tr >
                <th>
                    <span >emails</span>
                </th>
            </tr>
            <tr ng-repeat="x in emails">
                <td data-label="activity"  >
                    <span > {{ x.email}}</span>
                </td>
            </tr>
        </table>            
    </div>            
    <script>
    var app = angular.module('app', []);
    var lst=[];
    app.controller('MyCtrl', function($scope) {
        var en = new test.TB();
        $scope.searchRec = function(){
            console.log($scope.SearchText); 
            en.retrieve({where:{email:{like:"%"+$scope.SearchText+"%"}},limit: 30 }, function(err, records, event){
                if(err) {
                    alert(err.message);
                }
                else {              
                    console.log('test:'+records[0].get("email"));
                    records.forEach(function(record) {

                        lst.push({email:record.get("email")});
                    });
                }   
                $scope.calculateService();
            });  
        };
        $scope.calculateService = function(){ 
            console.log('insidecalculateService',lst);
            $scope.emails=lst;
            $scope.SearchText='';
            // xxx
            $scope.$apply();
            // xxx
        };  
    });         
    </script>
</apex:page>

The explanation is that as the retrieve function is not part of Angular and returns its results asynchronously, you must make the explicit $scope.$apply() call to notify Angular that there is a change in the model so that Angular then update the DOM. See e.g. AngularJS and scope.$apply for more depth on this subject.

2
  • so any time we create a function in angular contoller that changes the dom should we use $scope.$apply ?? Commented Oct 21, 2015 at 23:23
  • @SandeepNambath Only if the change is made by non-Angular code. In your example, the retrieve method is part of non-Angular code (Salesforce code) and runs asynchronously i.e. not in the turn that the $scope function was called in. Most changes e.g. a direct modification of $scope in via a $scope function have the $apply done automatically.
    – Keith C
    Commented Oct 22, 2015 at 7:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .