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>
  • Please post your code here. Link only questions and answers are brittle and require extra effort from the community. – Adrian Larson Oct 21 '15 at 22:00
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.

| improve this answer | |
  • so any time we create a function in angular contoller that changes the dom should we use $scope.$apply ?? – Sandeep Nambath Oct 21 '15 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 Oct 22 '15 at 7:21

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.