在 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;
        });
    };

但在模板中数据不会重新加载。看起来模板没有从控制器中捕获数据。

 <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 添加可编辑的信息。而且，可能有人知道，它是如何正确克里特的？ 我从传单地图传递信息

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

另外，我一周前开始学习 Angular，如果您发现代码有错误或错误编写，请写出来））

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

通过放置目标事件尝试：

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