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

Posted 2023-02-22

【中文标题】如何在 Angular Controller 中观察可变参数

【英文标题】：How to watch a changeable parameter in Angular Controller

【发布时间】：2017-01-28 04:26:40

【问题描述】：

我在更新 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=', ',');

【问题讨论】：

Pass variables to AngularJS controller, best practice?的可能重复

【参考方案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>