gpt4 book ai didi

javascript - ng-model 绑定(bind)不适用于 ng-template

转载 作者:行者123 更新时间:2023-11-28 06:13:25 25 4
gpt4 key购买 nike

我正在尝试为 ng-template 进行两种数据绑定(bind)并将其显示为 Angular Material 对话框,但不幸的是我无法绑定(bind)数据。以下是我获取数据的方式:

 $scope.editFormProperties = function (element, ev) {
formEditViewService.getFormProperties($scope.formId).then(function (data) {
$scope.form_properties.Form_Title = data[0].Form_Title;
$scope.form_properties.Instructions = data[0].Instructions;
$scope.form_properties.Get_Contact_Info = data[0].Get_Contact_Info;
$scope.form_properties.Get_Address_Info = data[0].Get_Address_Info;
$scope.form_properties.End_Date = data[0].End_Date;
$scope.form_properties.Complete_Message = data[0].Complete_Message;
});
$mdDialog.show({
controller: DialogController,
templateUrl: 'dialog2.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true,
fullscreen: false
})
.then(function (answer) {
if (answer === "proceed") {
element.IsDeleted = true;
return $scope.elements;
} else {
$mdDialog.cancel();
}
}, function () {
$mdDialog.cancel();
});

};

这就是模板标记:

<script type="text/ng-template" id="dialog2.tmpl.html">
<hide-gt-sm ng-cloak>
<form>
<md-toolbar class="md-toolbar-tools md-warn">
<p>EDIT: Form Properties</p>
<span flex></span>
<md-button class="md-icon-button" ng-click="cancel()">
<i class="material-icons">close</i>
</md-button>
</md-toolbar>
<md-dialog-content layout="column" layout-align="center center" ng-cloak flex="percentage" layout-margin layout-fill>
<div class="md-dialog-content" style="width: 500px; overflow-y: hidden;">
<md-input-container class='md-block condensed'>
<lable>Form Title</lable>
<input ng-model="Form_Title" />
</md-input-container>
<md-input-container class='md-block condensed'>
<lable class="md-subhead">Instructions</lable>
<md-toolbar layout="row" id="trix-toolbar" layout-align="center center">
<md-button class="md-icon-button ng-scope" ng-class="{'focused' : appliedFormat == 'bold'}" ng-click="applyFormat('bold')" id="bold">
<i class="material-icons">format_bold</i>
</md-button>
<md-button class="md-icon-button ng-scope" ng-class="{'focused' : appliedFormat == 'italic'}" ng-click="applyFormat('italic')" id="italic">
<i class="material-icons">format_italic</i>
</md-button>
<md-button class="md-icon-button ng-scope" ng-class="{'focused' : appliedFormat == 'strike'}" ng-click="applyFormat('strike')" id="underline">
<i class="material-icons">format_underline</i>
</md-button>
</md-toolbar>
<trix-editor id="trix-editor-mini" toolbar="trix-toolbar" rows="2" angular-trix md-select-on-focus ng-model="form_properties.Instructions" trix-change="onChangeAlternateLable(currentElementIndex, Instructions)" trix-selection-change="fireButtons()"></trix-editor>
</md-input-container>
<div layout="row">
<div layout="row" flex layout-align="center center">
<label flex class="md-body-1">Get Contact Info:</label>
<md-switch ng-model="form_properties.Get_Contact_Info" class="md-warn" flex>
</md-switch>
</div>
<div layout="row" flex layout-align="center center">
<label flex class="md-body-1">Get Address Info:</label>
<md-switch flex ng-model="form_properties.Get_Address_Info" class="md-warn">
</md-switch>
</div>
</div>
<div layout="row" layout-align="start center">
<lable class="md-body-1">End Date:</lable>
<md-datepicker ng-model="form_properties.End_Date" md-placeholder="End Date"></md-datepicker>
</div>
<md-input-container class='md-block condensed'>
<lable class="md-subhead">Complete Message</lable>
<md-toolbar layout="row" id="trix-toolbar" layout-align="center center">
<md-button class="md-icon-button ng-scope" ng-class="{'focused' : appliedFormat == 'bold'}" ng-click="applyFormat('bold')" id="bold">
<i class="material-icons">format_bold</i>
</md-button>
<md-button class="md-icon-button ng-scope" ng-class="{'focused' : appliedFormat == 'italic'}" ng-click="applyFormat('italic')" id="italic">
<i class="material-icons">format_italic</i>
</md-button>
<md-button class="md-icon-button ng-scope" ng-class="{'focused' : appliedFormat == 'strike'}" ng-click="applyFormat('strike')" id="underline">
<i class="material-icons">format_underline</i>
</md-button>
</md-toolbar>
<trix-editor id="trix-editor-mini" toolbar="trix-toolbar" rows="2" angular-trix md-select-on-focus ng-model="form_properties.Complete_Message" trix-change="onChangeAlternateLable(currentElementIndex, Complete_Message)" trix-selection-change="fireButtons()"></trix-editor>
</md-input-container>
<label class="md-body-2">This is an HTML field to be shown after a custom form is submitted to the end user.</label>
</div>
</md-dialog-content>
<md-dialog-actions layout="row" layout-align="start center">
<md-button ng-click="answer('save')" class="save-button">
save properties
</md-button>
<md-button ng-click="answer('cancel')" class="cancel-button">
cancel changes
</md-button>
</md-dialog-actions>
</form>
</script>

我可以看到 $scope 获取了正确的数据,但它没有出现。有什么想法吗?

最佳答案

我找到了解决方案,这很简单 - 我没有通过范围。对话框设置应如下所示:

     $mdDialog.show({
controller: DialogController,
scope: $scope,
templateUrl: 'dialog2.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose: true,
fullscreen: false
})

关于javascript - ng-model 绑定(bind)不适用于 ng-template,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36172638/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com