CODEWITHSUNDEEP
angularjs
user4898717
user4898717

Reputation: 66

How to update view when scope does not change

there is a textarea to input. And two buttons to click.

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

What is the process ?

input some characters in textarea, then click 'submit-btn', scope will save the 'msg'. But if click 'cancel-btn', scope won't save the msg.

What do I want ?

After I save msg, then input and click 'cancel-btn', I want to the textarea's innerHTML is scope.msg instead of input.

#

Now, I want to exec $scope.$apply() to update dom, but alert error $digest already in progress.

#

Maybe I need ng-model the textarea, and use the other param saved_msgsave the msg, when click 'cancel-btn', make the msg = saved_msg. But, there are some convenient ways ?

-------------------update 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` to change the dom class, when click 'cancel-btn', I want to refresh the dom decide to scope. It may be similar to $render.

--------------------update 6/26-------------- Thank for your help. I find a way to solve the problem.I add a div#main to contain what I want to save/refresh. ps: care for some change! The follow is my way. Maybe you have better way, welcome to share!

`<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>`

In controller,

`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');
        })
    }
});

`

Upvotes: 0

Views: 256

Answers (1)

Mateus AJ Leon
Mateus AJ Leon

Reputation: 1382

1 - You need to replace ng-bind of your textarea with ng-model, to update the scope while you are typing on it.

2 - To provide a cancel like that, in a simple manner, replace the ng-click content with a function, like cancel(formName). In your controller:

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();
            }
        };
    }]);

The formName argument is the name of the wrapper form element that you're using on your HTML, to access some specific properties, like $setPristine, which will reset the form processing to its initial state. NOTE: This doesn't mean that the fields values will be reseted.

Upvotes: 0

Related Questions