范围不变时如何更新视图

Question

有一个文本区域可以输入。还有两个按钮可以点击。

      `<textarea ng-bind="msg"></textarea> 
       <div class="cancel-btn" ng-click="is_hide=false;"></div>
       <div class="submit-btn" ng-click="submit_card()"></div>`

流程是什么？

在textarea中输入一些字符，然后点击'submit-btn'，scope会保存'msg'。但是如果点击'cancel-btn'，范围将不会保存消息。

我想要什么？

我保存完msg，然后输入并点击'cancel-btn'，我希望textarea的innerHTML是scope.msg而不是input。

#

现在，我想执行 $scope.$apply() 来更新 dom，但警告错误 $digest already in progress。

#

也许我需要ng-model textarea，并使用另一个参数saved_msgsave msg，当点击'cancel-btn'时，制作msg = saved_msg。但是，有一些方便的方法吗？

-----------------更新 6/25-----------------

`<div ng-controller="Ctrl">
 <div ng-class="{'selted':cid == 0}" data-cat="0"></div>
 <div ng-class="{'selted':cid == 1}" data-cat="1"></div>
 <div ng-class="{'selted':cid == 2}" data-cat="2"></div>
 <textarea ng-bind="msg"></textarea> 
 <div class="cancel-btn" ng-click="is_hide=false;"></div>
 <div class="submit-btn" ng-click="submit_card()"></div>
 </div>

In fact, I use some directive byjQuery` 改变 dom 类，当点击 'cancel-btn' 时，我想刷新 dom 决定范围。 它可能类似于 $render。

--------更新 6/26------------- 感谢您的帮助。我找到了解决问题的方法。我添加了一个div#main 来包含我想要保存/刷新的内容。 ps：注意一些零钱！ 以下是我的方式。或许你有更好的办法，欢迎分享！

`<div ng-controller="Ctrl">
 <div id="main">
 <div ng-class="{'selted':cid == 0}" data-cat="0" selt></div>
 <div ng-class="{'selted':cid == 1}" data-cat="1" selt></div>
 <div ng-class="{'selted':cid == 2}" data-cat="2" selt></div>
 <textarea ng-bind="msg" id="msg"></textarea>
 </div> 
 <div class="cancel-btn" ng-click="reset()"></div>
 <div class="submit-btn" ng-click="submit_card()"></div>
 </div>`

在控制器中，

`app.controller('Ctrl', ['$scope', '$compile', function($scope, $compile)           {
    $scope.reset = function(){ //reset depend on scope
        $('#main div').removeClass('selted');  
    //the dom maybe change, need clear 'selted' class first
     //compile(dom)(scope) 
        $('#main').html($compile($('#main').html())($scope));
    }
    $scope.save = function(){  //save the scope
        $scope.msg = $('#msg').val();
        $scope.cid = $('.selted').index()+1;  
    }
}]);

app.directive('selt', function(){  
  //this is directive, only change class on dom
    return function(scope,ele){
        ele.click(function(){
            ele.addClass('selted').siblings().removeClass('selted');
        })
    }
});

`

Answer 1

1 - 您需要将 textarea 中的 ng-bind 替换为 ng-model，以便在您输入时更新范围。

2 - 要提供类似的cancel，请以简单的方式将ng-click 内容替换为函数，例如cancel(formName)。在您的控制器中：

angular.module('exampleApp', [])
    .controller('Ctrl', ['$scope', function ($scope) {
        $scope.is_hide = false;
        $scope.msg = null;

        $scope.cancel = function cancel (form) {
            $scope.is_hide = true;
            $scope.msg = null;
            if (form) {
                form.$setPristine();
            }
        };
    }]);

formName 参数是您在 HTML 上使用的包装器 form 元素的名称，用于访问某些特定属性，例如 $setPristine，这会将 form 处理重置为其初始状态。注意：这并不意味着字段值将被重置。