Question

我正在尝试使用指令

在表单中单击按钮后在模板中显示注释

HTML：

LIKE

和JS：

<h2>Comments</h2>
<ul class="comments_list">
    <li ng-repeat="com in comments" ng-cloak>{{com.name}} wrote<div class="message">{{com.text}}</div></li>
</ul>
<div class="add_comment" 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-comment ng-model="addComm">Add</button>
</div>

但是在HTML中单击“添加”后，我的视图没有更新。如果我刷新页面（我正在使用ngStorage） - 新注释将出现在列表中，但不会在单击“添加”按钮后出现。

Answer 1

这种情况正在发生，因为您正在javascript单击处理程序中更改$ scope变量的值。试试这个：

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.comments.push(angular.copy(ngModel.$modelValue));
               });
            });
        }
    }
});

Answer 2

你应该通知角度有什么变化：

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

Answer 3

您不需要ngModelCtrl，因为该值已附加到范围。

但导致问题的原因是你没有通知角度模型有变化，为了做到这一点，只需调用$ scope。$ apply

Answer 4

在异步回调中更改模型时，应将其封装到$apply中：

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

另一种解决方案是在更改后直接致电$apply：

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

Angular指令未更新模型视图

4 个答案: