ng-modelバインディングがng-templateと連携していません

Question

ng-template用に2通りのデータバインディングを作成し、これを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

私は同様の問題（1まったく同じではないが）を経験しています。私の場合は、<trix-editor>要素にng-if="true"を追加することで解決できました。このシナリオでも役立ちます。