ng-Modell-Bindung funktioniert nicht mit ng-Vorlage

Question

Ich versuche, zwei Möglichkeiten, Datenbindung für ng-Vorlage zu machen und dies als Angular Material-Dialog zu zeigen, aber leider kann ich keine Daten binden. Hier ist, wie ich Daten bekommen:

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

      }; 

Und das Vorlagen-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> 

ich sehen kann, dass $scope richtigen Daten zu erhalten, aber es wird nicht angezeigt. Irgendwelche Ideen?

Answer 1

Ich fand Lösung, das ist ziemlich einfach - ich habe den Anwendungsbereich nicht bestanden. Dialog Einstellung sollte wie folgt aussehen:

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

Answer 2

ich ein ähnliches Problem erlebt haben (wenn auch nicht genau die gleiche eins). Ich konnte es in meinem Fall lösen, indem ich ng-if="true" zum <trix-editor> Element hinzufüge. Es könnte auch in diesem Szenario helfen.