mdDialogのテーブルをjsonという編集可能なデータで作成する

Question

jsonデータでダイアログを作成しようとしています。

 $scope.showAttributeData = function(data) { 
     $scope.feature = data 
     console.log($scope.feature) 
     var that = this; 
     var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && that.customFullscreen; 
     $mdDialog.show({ 
       locals: { 
        feature: $scope.feature 
       }, 
       controller: attributeDialogController, 
       controllerAs: 'attributeDialog', 
       templateUrl: 'attribute-dialog.template.html', 
       parent: angular.element(document.body), 
       clickOutsideToClose: true, 
       hasBackdrop: false, 
       fullscreen: useFullScreen, 
       openFrom: angular.element(document.querySelector('#left')), 
       closeTo: angular.element(document.querySelector('#left')) 
      }); 
     $scope.$watch(function() { 
      return $mdMedia('xs') || $mdMedia('sm'); 
     }, function(wantsFullScreen) { 
      return that.customFullscreen = wantsFullScreen === true; 
     }); 
    }; 

しかし、tempalteデータはrederしません。それはテンプレートのようなコントローラからのデータをキャッチしていないようです。

<script type="text/ng-template" id="attribute-dialog.template.html"> 
      <md-dialog id="attribute-dialog"> 
       <md-toolbar> 
        <div class="md-toolbar-tools"> 
         <h2>Attribut info</h2> 
         <span flex></span> 
         <md-button class="md-icon-button" ng-click="attributeDialog.close()"> 
          <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon> 
         </md-button> 
        </div> 
       </md-toolbar> 
       <md-dialog-content> 
        <div class="md-dialog-content"> 
         <table> 
          <thead> 
           <tr> 
            <th>Attr</th> 
            <th>Value</th> 
           </tr> 
          </thead> 
          <tbody> 
           <tr ng-repeat="(key, value) in feature"> 
            <td> {{key}} </td> 
            <td> 
             <input type="text" ng-model="feature[key]"/> 
            </td> 
           </tr> 
          </tbody> 
         </table> 
        </div> 
       </md-dialog-content> 
       <md-dialog-actions layout="row"> 
        <span flex></span> 
        <md-button type="submit" ng-click="attributeDialog.close()" class="md-raised md-primary">ОК</md-button> 
       </md-dialog-actions> 
      </md-dialog> 
     </script> 

だから何ができますか？ また、ダイアログテンプレートはコントローラーとしてかなり新しくなっています。将来、ng-modelで編集可能な情報を追加します。そして、誰かが知っているかもしれません。 私はで

Answer 1

私はあなたのマークアップを使用してあなたを助けるために試験例を作成しました - CodePen

マークアップ

<div ng-controller="MyController as vm" ng-cloak="" ng-app="app"> 
    <md-button class="md-primary md-raised" ng-click="vm.open($event)"> 
    Custom Dialog 
    </md-button> 

    <script type="text/ng-template" id="test.html"> 
     <md-dialog id="attribute-dialog"> 
     <md-toolbar> 
      <div class="md-toolbar-tools"> 
      <h2>Attribut info</h2> 
      <span flex></span> 
      <md-button class="md-icon-button" ng-click="attributeDialog.close()"> 
       <md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon> 
      </md-button> 
      </div> 
     </md-toolbar> 
     <md-dialog-content> 
      <div class="md-dialog-content"> 
      <table> 
       <thead> 
       <tr> 
        <th>Attr</th> 
        <th>Value</th> 
       </tr> 
       </thead> 
       <tbody> 
       <tr ng-repeat="(key, value) in feature"> 
        <td> {{key}} </td> 
        <td> 
        <input type="text" ng-model="feature[key]"/> 
        </td> 
       </tr> 
       </tbody> 
      </table> 
      </div> 
     </md-dialog-content> 
     <md-dialog-actions layout="row"> 
      <span flex></span> 
      <md-button type="submit" ng-click="attributeDialog.close()" class="md-raised md-primary">ОК</md-button> 
     </md-dialog-actions> 
     </md-dialog> 
    </script> 
</div> 

JS

angular.module('app',['ngMaterial']) 

.controller('MyController', function($scope, $mdDialog) { 
    this.open = function(ev) { 
    $scope.feature = { 
     blah: "blah", 
     yah: "yah" 
    } 
    $mdDialog.show(
     { 
     templateUrl: "test.html", 
     clickOutsideToClose: true, 
     scope: $scope, 
     preserveScope: true, 
     controller: function($scope) { 
     }, 
    }); 
    }; 
}) 

Answer 2

TRY）リーフレットマップ

mainLayer.eachLayer(function(layer) { 
     layer.on({ 
      click: function() { 
       var scope = angular.element($("#main")).scope().showAttributeData(layer.feature.properties); 
      }, 
     }); 
    }); 

からの情報はまた、私は角週間前に学び始め、そしてあなたには、いくつかのエラーやコードの誤書き込みを気づけば、）それを書いてください合格しています対象イベントを置く：

$scope.showAttributeData = function(data,ev) { 
    $scope.feature = data 
    console.log($scope.feature) 
    var that = this; 
    var useFullScreen = ($mdMedia('sm') || $mdMedia('xs')) && that.customFullscreen; 
    $mdDialog.show({ 
      locals: { 
       feature: $scope.feature 
      }, 
      controller: attributeDialogController, 
      controllerAs: 'attributeDialog', 
      templateUrl: 'attribute-dialog.template.html', 
      targetEvent: ev, 
      parent: angular.element(document.body), 
      clickOutsideToClose: true, 
      hasBackdrop: false, 
      fullscreen: useFullScreen, 
      openFrom: angular.element(document.querySelector('#left')), 
      closeTo: angular.element(document.querySelector('#left')) 
     }) 
     .then(function(credentials) { 
      return that.showToast("Добро пожаловать, " + credentials.username + "."); 
     }); 
    $scope.$watch(function() { 
     return $mdMedia('xs') || $mdMedia('sm'); 
    }, function(wantsFullScreen) { 
     return that.customFullscreen = wantsFullScreen === true; 
    }); 
};