Question

在ng-repeat块中我有文本框。为了检测内容何时与原始内容不同，原始数据存储在变量中。

<tr data-ng-repeat="p in products">
  <td>
    <textarea data-elastic data-ng-model="p.comment" data-ng-change="hasChanged=checkChange(original, rnd.comment);" data-ng-init="original=rnd.comment; hasChanged=false"></textarea>
  </td>
  <td class="save" ng-show="hasChanged" ng-click="save(p, original)">Save</td>

仅在内容更改时显示保存按钮。成功保存后，原始值应更新为新值。

我可以通过控制器中的一个功能这样做：

$scope.save = function (p, original) {
  //...successful save
  this.original = p.comment; //this works
  original = p.comment; //this does not
}

依赖于＆＃39;这个＆＃39;形式的隐含范围。看起来并不合理。

为什么不更新变量（original = ...）有效？什么是更聪明的方法呢？

根据评论我已将其更新如下：

ng-click="save(p, this)"

$scope.save = function (p, scope) {
 //...successful save
 scope.original = p.comment; //this works
}

现在这似乎是不合理的。传递范围是否被视为不良做法或可接受？

产品定义如下：

productStatusApp.controller('productStatusCtrl', function ($scope, $http, cid) {
   $http.get('api/company/products/' + cid).success(function (data) {
      $scope.products = data.products;
   });

Answer 1

我发现避免这类问题的最佳方法是使用服务

https://docs.angularjs.org/guide/services

http://viralpatel.net/blogs/angularjs-service-factory-tutorial/

一些粗略的代码（仅用于指针，根本没有测试）

<tr data-ng-repeat="p in ProductsService.products">
   <td>
       <textarea data-elastic data-ng-model="p.comment"></textarea>
   </td>
   <td class="save" ng-show="p.originalComment!==p.comment" ng-click="ProductsService.save(p)">Save</td>
</tr>

和

var module = angular.module('app', []);
module.service('ProductsService', function () {
   var products = [postA,postB,...,PostC];

   products = products.map(function(p){p.originalComment=p.comment});

   var save = function(p){
         p.originalComment=p.comment;
         someAjaxRequest(function _callback(err,response){....})
   }

   return {products:products,save:save};
});

和

module.controller('ProductsController', function ($scope, ProductsService) { 
    $scope.ProductsService= ProductsService;
});

它们还允许更好的可读性，WIN WIN

Angular：从函数更新变量的最佳实践？

1 个答案: