在使用指令单击表单中的按钮后,我试图在模板中显示注释
HTML:
<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>
和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.comments.push(angular.copy(ngModel.$modelValue));
});
}
}
});
但是在 HTML 中单击“添加”后,我的 View 没有更新。如果我刷新页面(我正在使用 ngStorage) - 新评论将出现在列表中,但不会在单击“添加”按钮后出现。
最佳答案
发生这种情况是因为您正在 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));
});
});
}
}
});
关于javascript - Angular 指令没有更新模型 View ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36755179/