Question

我尝试设置更改字典，以便在执行拍摄快照功能时跟踪对范围的任何修改，但是，出于某种原因，它在第三次尝试时开始工作，其他情况下，我的当前值与之前同步，任何想法为什么？

我的保存工厂看起来像：

 .controller('Sample', function($scope, AuthoringState) {


        var tasks = {
            tasks:[
                {value: 1, text: 'I\'m a task'},
                {value: 2, text: 'I\'m another task'}] 
        };

        var vm = this;

        /**Init**/
        vm.checklist = new CheckList(tasks);
        vm.checklist = AuthoringState.addChange(vm.checklist);  


        /** Methods**/

        $scope.snapshoot = function() {
            vm.checklist = AuthoringState.addChange(vm.checklist);
        }

        $scope.undo = function() {
            vm.checklist = AuthoringState.undo(vm.checklist);
        }

        $scope.back = function() {
            vm.checklist = AuthoringState.back(vm.checklist);
        }

        $scope.check = function() {
            console.log($scope.checklist);
        }
});

我的控制器是这样的：

kafka
    -----
      - instance #kafka-localhost-9999 [ERROR]: 'Cannot connect to instance localhost:9999 java.io.IOException: Failed to retrieve RMIServer stub: javax.naming.ServiceUnavailableException [Root exception is java.rmi.ConnectException: Connection refused to host: localhost; nested exception is: \n\tjava.net.ConnectException: Connection refused]' collected 0 metrics
      - Collected 0 metrics, 0 events & 0 service checks

这是一个jsbin，看它有效。

Answer 1

通过从服务返回快照对象本身并将它们绑定到模板，您允许用户的更改来修改快照。听起来你希望它们是不可变的，所以快照在保存后不会改变。

而是在还原它们时克隆快照并返回克隆，使快照不可触及：

undo : function(checklist) {
  if(checklist.track === 1) {
    return checklist;
  }
  return _.cloneDeep(_pool[checklist.track - 1]);
},
back : function(checklist) {
  if(checklist.track === track) {
    return checklist;
  }
  return _.cloneDeep(_pool[checklist.track + 1]);
}

此外，在保存新快照时，请勿使用池中的快照替换作用域上的当前核对表对象（这使快照本身可编辑），您只需更新其track即可。属性：

addChange : function(data) {
  track++;
  var temp = _.cloneDeep(data);
  _pool[track] = temp;
  temp.track = track;
  data.track = track;
},

在控制器中：

vm.checklist = new CheckList(tasks);
AuthoringState.addChange(vm.checklist);

$scope.snapshoot = function() {
    AuthoringState.addChange(vm.checklist);
}

结合这些变化，我们得到了这个工作版本：http://jsbin.com/juwimepofi/1/edit?js,output

Angular 1.5，克隆范围以跟踪变化

1 个答案: