Question

我正在使用ngSwitch指令将视图切换为编辑div内容。 HTML如下 -

     <div ng-switch="isEditing" ng-controller="descController">
      <div ng-switch-when="true">
          <textarea name="Name" rows="8" class="form-control" ng-model="desc"></textarea>
          <button class="btn btn-primary" ng-click="saveEdit($parent)">Save</button>
          <button class="btn btn-warning" ng-click="cancelEdit($parent);">Cancel</button>
      </div>
      <div ng-switch-default>
          <p class="lead" >{{desc}}</p>
          <p><button class="btn btn-mini btn-danger" ng-click="$parent.isEditing = true;">Edit</button></p>
      </div>

    </div>

控制器代码如下

home.controller("descController", function($scope, Desc){

(function getAboutMe(){
    Desc.getAboutMe().success(function(about){
        $scope.desc = about[0].description;
        $scope.actualText = about[0].description;

        $scope.saveEdit = function($parent){

            //$scope.desc = $scope.desc;
            $parent.isEditing = false;
        }

        $scope.cancelEdit = function($parent){

            $scope.desc = $scope.actualText;
            $parent.isEditing = false;
        };
    }).error(function(err){
        alert(err);
    });
})();


});

我想要做的是，当按下取消按钮时，我希望原始文本在div上可见，当单击保存按钮时，我希望新文本在div上可见。我怎样才能实现这一目标？我是Angular的新手。

Answer 1

你需要这样的东西吗？

$scope.saveEdit = function($parent){
            $scope.actualText = $scope.desc; //update actualText before switching to view mode
            $parent.isEditing = false;
        }

        $scope.cancelEdit = function($parent){
            $scope.desc = $scope.actualText; //restore des
            $parent.isEditing = false;
        };

主要问题是ng-switch创建了一个新范围。因此，您需要使用$ parent：

绑定到textarea中的父作用域

<textarea name="Name" rows="8" class="form-control" ng-model="$parent.desc"></textarea>

DEMO

ngModel数据绑定无法正常工作

1 个答案: