andrey.shedko andrey.shedko - 1 month ago 22
AngularJS Question

ng-model binding is not working with ng-template

I'm trying to make two ways data binding for ng-template and show this as Angular Material dialog, but unfortunately I can't get data binded.
Here is how I'm getting data:

$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();
});

};


And that's template markup:

<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>


I can see that
$scope
getting proper data, but it's not appear. Any ideas?

Answer

I found solutuion, that's quite easy - I did not pass scope. Dialog setting should look like this:

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