如何在Angular中實現可取消的可編輯字段？

Question

在我的模型中，我有一個需要綁定到幾個控件的字段。其中一個控件是一個文本框。文本框不應該直接編輯該字段，而應該允許用戶鍵入，然後提交更改或取消。如果發生任何其他操作，則應覆蓋文本字段中的任何更改。其中一個限制是，有其他UI組件會更改該值並且無法訪問本地作用域。

我實現了一個指令所需的行爲：http://jsfiddle.net/fLxjjmb7/3/

它按預期工作，但我覺得必須有一個更好的方式來做到這一點。有任何想法嗎？

<div ng-app="app" ng-controller="controller"> 
    <div>{{foo}}</div> 
    <button ng-click="increment()">increment</button> 
    <button ng-click="decrement()">decrement</button> 
    <br /> 
    <div shadow="foo"> 
     <input type="text" ng-model="foo" /> 
     <button ng-click="commit()">update</button> 
     <button ng-click="cancel()">cancel</button> 
    </div> 
</div> 

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

var controller = app.controller('controller', function ($scope) { 
    $scope.foo = 1; 
    $scope.increment = function() { ++$scope.foo; }; 
    $scope.decrement = function() { --$scope.foo; }; 
}); 

var directive = app.directive('shadow', function() { 
    return { 
    scope: true, 
    link: function(scope, el, att) { 
     scope.$parent.$watch(att.shadow, function (newValue) { 
      scope[att.shadow] = newValue; 
     }); 

     scope.commit = function() { 
     scope.$parent[att.shadow] = angular.copy(scope[att.shadow]); 
     }; 

     scope.cancel = function() { 
      scope[att.shadow] = angular.copy(scope.$parent[att.shadow]); 
     }; 
    } 
    }; 
}); 

Answer 1

覺得你這個有點:)

查看複雜：

<div ng-controller="ShadowController"> 
    <h1>{{foo}}</h1> 

    <div> 
     <button ng-click="increment()">increment</button> 
     <button ng-click="decrement()">decrement</button> 
    </div> 

    <div> 
     <input type="text" ng-model="tempFoo" /> 
     <button ng-click="commit()">update</button> 
     <button ng-click="cancel()">cancel</button> 
    </div> 
</div> 

控制器：

.controller('ShadowController', function ($scope) { 
    $scope.foo = 1; 

    $scope.increment = function() { 
     ++$scope.foo; 
     $scope.cancel(); 
    }; 

    $scope.decrement = function() { 
     --$scope.foo; 
     $scope.cancel(); 
    }; 

    $scope.commit = function() { 
     $scope.foo = parseFloat($scope.tempFoo); 
    }; 

    $scope.cancel = function() { 
     $scope.tempFoo = $scope.foo; 
    }; 

    $scope.cancel(); 
}); 

一個更炫的方法是跟蹤的臨時價值變化，只有enabl如果在原始和臨時之間存在差異，則提交/取消按鈕。

查看：

<div ng-controller="ShadowControllerAdv"> 
    <h1>{{data.original}}</h1> 

    <div> 
     <button ng-click="increment()">increment</button> 
     <button ng-click="decrement()">decrement</button> 
    </div> 

    <div> 
     <input type="text" ng-model="data.edit" /> 
     <button ng-click="commit()" ng-disabled="!state.hasChanged">update</button> 
     <button ng-click="reset()" ng-disabled="!state.hasChanged">cancel</button> 
    </div> 
</div> 

控制器：

.controller('ShadowControllerAdv', function ($scope) { 
    var _dataWatcher; 

    $scope.data = { 
     original: 1 
    }; 

    $scope.state = { 
     hasChanged: false 
    }; 

    function _startWatcher() { 
     _dataWatcher = $scope.$watch('data.edit', function (newValue, oldValue) { 
      if (newValue !== oldValue) { 
       $scope.state.hasChanged = true; 
      } else { 
       $scope.state.hasChanged = false; 
      } 
     }, true); 
    } 

    function _stopWatcher() { 
     if (!_dataWatcher) { 
      return; 
     } 
     _dataWatcher(); 
    } 

    $scope.reset = function() { 
     _stopWatcher(); 
     $scope.data.edit = $scope.data.original; 
     $scope.state.hasChanged = false; 
     _startWatcher(); 
    } 

    $scope.commit = function() { 
     _stopWatcher(); 
     $scope.data.original = parseFloat($scope.data.edit); 
     $scope.reset(); 
    } 

    $scope.increment = function() { 
     $scope.data.original = $scope.data.original + 1; 
     $scope.reset(); 
    }; 

    $scope.decrement = function() { 
     $scope.data.original = $scope.data.original - 1; 
     $scope.reset(); 
    }; 

    $scope.reset(); 
});