如何在 Angular Controller 中观察可变参数

Question

我在更新 Salesforce 时遇到问题。 在事件模糊时，我想要表格单元格的新结果，传递给角度控制器，然后更新 salesforce 中的联系人。没有监视，它将选择的对象传递给远程操作而不会出错，但最初是没有错误的，而不是编辑的字段一。我尝试添加手表，参考这篇文章http://blogs.microsoft.co.il/choroshin/2014/03/26/angularjs-watch-for-changes-in-specific-object-property/，但是手表报错“$scope.ContactData.map is not a function”。

我的 Angular 控制器

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>

我的页面

<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>

还有我的遥控器

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=', ',');
}
}

Answer 1

我在小提琴上做了一个简化。签出this。

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>