How to watch a changeable parameter in Angular Controller

Question

I have a problem of updating the Salesforce. On event blur, I want new result of table cell, pass to the angular controller, and then update contact in salesforce. Without watch, it passes the choosen object to remote action without errors, but the initial, not with edited field one. I tried to add watch,reffering to this article http://blogs.microsoft.co.il/choroshin/2014/03/26/angularjs-watch-for-changes-in-specific-object-property/, but the watch gives error "$scope.ContactData.map is not a function".

My Angular Controller

var app = angular.module('MyApp',[]); 

app.controller('myController',function($scope,VFRemotingFactory){  
    $scope.mcm = {};

    VFRemotingFactory.getData().then(
        function(result){  
            $scope.ContactData = result;  
        }
    ); 

    $scope.$watch(function($scope) {
                      return $scope.ContactData.map(function(obj) {
                           return obj.FirstName
                      });
                  }, 
                  function (newVal) {}, 
                  true);

    $scope.orderByMe = function(x) {
        $scope.myOrderBy = x;
    }  

    $scope.editMe = function (obj) {
        obj.target.setAttribute("contenteditable", true);
        obj.target.focus();
    }

    $scope.NotEditMe = function (obj, contact){
        obj.target.setAttribute("contenteditable", false);
        UpdateContact(contact);

});

app.factory('VFRemotingFactory',function($q,$rootScope){ 
    var factory = {};
    factory.getData = function(searchText){  
        var deferred = $q.defer();
        GetAllContactsByFilter(function(result){  
            $rootScope.$apply(function(){  
                deferred.resolve(result);  
            });  
        }, searchText);  
        return deferred.promise;  
    }
    return factory;  
});

function GetAllContactsByFilter(callback, searchText){  
    if(searchText == undefined){
        searchText = '';
    }
     Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.ContactsController.GetAllContactsByFilter}', 
                                              searchText,
                                              callback,  
                                              {escape: false}  
                                             );    
}

function UpdateContact(Contact){  
    Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.ContactsController.UpdateContact}', 
                                              Contact,
                                              function(result,event){},
                                              {escape: false}
                                             );    
}
</script>

My Page

<tr ng-repeat="contactVar in ContactData | orderBy:myOrderBy | filter:mcm.searchText"/>
<td contenteditable="false" ng-dblclick="editMe($event)" ng-blur="NotEditMe($event,contactVar)"> {{contactVar.FirstName}}</td>
<td contenteditable="false" ng-dblclick="editMe($event)" ng-blur="NotEditMe($event,contactVar)"> {{contactVar.LastName}}</td>
<td contenteditable="false" ng-dblclick="editMe($event)" ng-blur="NotEditMe($event,contactVar)"> {{contactVar.Phone}}</td>

And my Remote Controller

public class ContactsController {
@RemoteAction
public static List<Contact> GetAllContactsByFilter(String searchText){
    String searchString = '%' + searchText + '%';
    List<Contact> contactList = [SELECT FirstName, LastName, Phone, Email, Title, Account.Name FROM Contact];
    return contactList;
}

@RemoteAction
 public static void UpdateContact(String contact){
    System.debug(contact);
    Contact contactForUpdate = new Contact();
    contactForUpdate.FirstName = contact.substringBetween('FirstName=', ',');
    contactForUpdate.LastName = contact.substringBetween('LastName=', ',');
    contactForUpdate.Phone = contact.substringBetween('Phone=', ',');
}
}

Possible duplicate of [Pass variables to AngularJS controller, best practice?](http://stackoverflow.com/questions/11703477/pass-variables-to-angularjs-controller-best-practice) — T.Todua, Sep 20 '16 at 11:29

score 0 · Answer 1 · answered Sep 20 '16 at 14:06

I have done a simplified on fiddle. Check this out.

var app = angular.module('MyApp', []);

app.controller('myController', ['$scope', function($scope) {

  $scope.mcm = {};
  $scope.ContactData = [{
    Id: 1,
    FirstName: 'ABC'
  }, {
    Id: 2,
    FirstName: 'DEF'
  }]


  $scope.orderByMe = function(x) {
    $scope.myOrderBy = x;
  }

  $scope.editMe = function(obj) {
    obj.target.setAttribute("contenteditable", true);
    obj.target.focus();
  }

  $scope.NotEditMe = function(obj, contact) {
    obj.target.setAttribute("contenteditable", false);
    console.log(contact.Id);
    console.log(contact.FirstName);
  }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="MyApp">
  <div ng-controller="myController">
    <table>
      <tr ng-repeat="contactVar in ContactData">
        <td contenteditable="false" ng-dblclick="editMe($event)" ng-mouseleave="NotEditMe($event,contactVar)"> {{contactVar.FirstName}}</td>
      </tr>
    </table>

  </div>
</body>

How to watch a changeable parameter in Angular Controller

1 Answers1