Question

我正在尝试为ng-template创建两种数据绑定方式，并将其显示为Angular Material对话框，但不幸的是我无法获取数据绑定。以下是我获取数据的方式：

 $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获取正确的数据，但它没有出现。有什么想法吗？

Answer 1

我找到了解决方案，这很容易 - 我没有通过范围。对话框设置应如下所示：

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

Answer 2

ng-model绑定不适用于ng-template

2 个答案: