I'm trying to show ments in template after clicking button in form using directive

HTML:

<h2>Comments</h2>
<ul class="ments_list">
    <li ng-repeat=" in ments" ng-cloak>{{.name}} wrote<div class="message">{{.text}}</div></li>
</ul>
<div class="add_ment" ng-show="posts.length > 0">
    <input type="text" class="form-control" ng-model="addComm.name" placeholder="Your name">
    <textarea class="form-control" ng-model="addComm.text" placeholder="Enter message"></textarea>
    <button class="btn btn-success" add-ment ng-model="addComm">Add</button>
</div>

And JS:

app.directive('addComment', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        priority: 1,
        link: function ($scope, element, attrs, ngModel) {
            element.on("click", function(event){
                event.preventDefault();
                console.log(ngModel.$modelValue);
                $scopements.push(angular.copy(ngModel.$modelValue));
            });
        }
    }
});

But after clicking "Add" in HTML my view didn't update. If I refresh the page (I'm using ngStorage) - new ment will appear in list, but not after clicking "Add" button.

I'm trying to show ments in template after clicking button in form using directive

HTML:

<h2>Comments</h2>
<ul class="ments_list">
    <li ng-repeat=" in ments" ng-cloak>{{.name}} wrote<div class="message">{{.text}}</div></li>
</ul>
<div class="add_ment" ng-show="posts.length > 0">
    <input type="text" class="form-control" ng-model="addComm.name" placeholder="Your name">
    <textarea class="form-control" ng-model="addComm.text" placeholder="Enter message"></textarea>
    <button class="btn btn-success" add-ment ng-model="addComm">Add</button>
</div>

And JS:

app.directive('addComment', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        priority: 1,
        link: function ($scope, element, attrs, ngModel) {
            element.on("click", function(event){
                event.preventDefault();
                console.log(ngModel.$modelValue);
                $scope.ments.push(angular.copy(ngModel.$modelValue));
            });
        }
    }
});

But after clicking "Add" in HTML my view didn't update. If I refresh the page (I'm using ngStorage) - new ment will appear in list, but not after clicking "Add" button.

• javascript
• angularjs
• model-view-controller
• angularjs-directive
• angularjs-scope

Share Improve this question Follow edited Apr 20, 2016 at 23:58 angelcool 2,54611 gold badge2525 silver badges2626 bronze badges asked Apr 20, 2016 at 21:06 Demyd GanenkoDemyd Ganenko 10811 silver badge99 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

It's happening because you are changing the value of your $scope variable inside javascript click handler. Try this:

app.directive('addComment', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        priority: 1,
        link: function ($scope, element, attrs, ngModel) {
            element.on("click", function(event){
                event.preventDefault();
                console.log(ngModel.$modelValue);
                $scope.$apply(function() {
                     $scope.ments.push(angular.copy(ngModel.$modelValue));
               });
            });
        }
    }
});

You shall notify angular that something has changed:

element.on("click", function(event){
    event.preventDefault();
    console.log(ngModel.$modelValue);
    $scope.$apply(function () {
        $scope.ments.push(angular.copy(ngModel.$modelValue));
    });
});

You don't need the ngModelCtrl since the value is attached to scope already.

But what cause the problem is that you don't notify angular that the model has change, in order to do so, just call $scope.$apply

When you change model in asynchronous callback, you should encapsulate it into $apply:

$scope.$apply(function(){
    $scope.variable = true;
});

The alternative solution is to call $apply directly, after change:

$scope.variable = true;
$scope.$apply();