0

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 のデータは再表示されません。テンプレートがコントローラーからのデータをキャッチしなかったようです。

 <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 を学び始めました。エラーやコードの書き方の誤りに気付いた場合は、それらを書いてください))

4

2 に答える 2

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) {
       },
    });
  };
})
于 2016-11-09T10:30:42.233 に答える
0

put target event で試してください:

 $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;
    });
};
于 2016-11-09T10:20:46.017 に答える