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

4 Answers 4

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