如何使用AngularJS Material对话框将数据传递到模板
如何使用AngularJS Material对话框将数据传递到模板
提问于 2018-05-16 15:14:39
我正在创建一个简单的评论应用程序与AngularJS材料，我想要一个编辑评论对话框出现与评论正文和用户电子邮件作为双向数据绑定，但因为我正在使用一个对话框与templateUrl，我不知道如何将评论数据传递到该网址供我编辑。
function DialogController($scope, $mdDialog) {
$scope.hide = function() {
$mdDialog.hide();
};
}
$scope.editComment = function(comment) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'dialog.html',
parent: angular.element(document.body),
targetEvent: event,
clickOutsideToClose:true,
fullscreen: $scope.customFullscreen,
locals: {
comments: $scope.comments
}
});
$scope.comment = comment;
console.log(comment);
}; <!-- Comments cards -->
<div class="container">
<div ng-repeat="($index,comment) in comments" style="margin-top:50px;">
<div class="md-title">Comment: {{ $index + 1 }}</div>
<br>
<md-card>
<md-content layout="row">
<div class="flex-90">
<md-card-content class="md-title">
{{comment.body}}
</md-card-content>
<md-chips>
<md-chip> {{comment.email}} </md-chip>
</md-chips>
</div>
<div class="flex" layout="row" layout-align="end start">
<md-button class="md-icon-button"
ng-click="editComment(comment)">
<md-icon>edit</md-icon>
</md-button>
<md-button class="md-icon-button"
ng-click="deleteComment($event, comment)">
<md-icon>clear</md-icon>
</md-button>
</div>
</md-content>
</md-card>
</div>
</div>
回答 1
Stack Overflow用户
发布于 2018-05-16 15:34:44
我想这就是你想要达到的目标。
所以，让我们一步一步来。
如果您不希望它是双向绑定的，那么可以使用angular.copy或Object.assign.
- After，在
- 函数中，您应该将这个comment对象作为参数传递，然后将它赋值给您的父作用域
- 对象，这样它就会在那里发生变化。
function DialogController($scope, $mdDialog, comments) {
$scope.comment = Object.assign(comments);
$scope.hide = function() {
$mdDialog.hide();
};
$scope.editComment = function () {
$mdDialog.hide($scope.comment);
}
}
$scope.editComment = function(comment) {
$mdDialog.show({
controller: DialogController,
templateUrl: 'dialog.html',
parent: angular.element(document.body),
targetEvent: event,
clickOutsideToClose:true,
fullscreen: $scope.customFullscreen,
locals: {
comments: comment
}
}).then(function (result) {
comment = result;
});
console.log(comment);
}; <!-- Comments cards -->
<div class="container">
<div ng-repeat="($index,comment) in comments" style="margin-top:50px;">
<div class="md-title">Comment: {{ $index + 1 }}</div>
<br>
<md-card>
<md-content layout="row">
<div class="flex-90">
<md-card-content class="md-title">
{{comment.body}}
</md-card-content>
<md-chips>
<md-chip> {{comment.email}} </md-chip>
</md-chips>
</div>
<div class="flex" layout="row" layout-align="end start">
<md-button class="md-icon-button"
ng-click="editComment(comment)">
<md-icon>edit</md-icon>
</md-button>
<md-button class="md-icon-button"
ng-click="deleteComment($event, comment)">
<md-icon>clear</md-icon>
</md-button>
</div>
</md-content>
</md-card>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50364541
复制相关文章
相似问题