I'm attempting to implement a dialog using JSON data.
$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;
});
};
However, in the template, the data does not render. It seems like the template is not receiving the data from the controller.
<script type="text/ng-template" id="attribute-dialog.template.html">
<md-dialog id="attribute-dialog">
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Attribute Information</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">OK</md-button>
</md-dialog-actions>
</md-dialog>
</script>
Could it be something else? Additionally, both the dialog template and controller are relatively new. In the future, I plan to incorporate editable information with ng-model. If anyone knows how to do this correctly, please let me know. I am passing information from a leaflet map.
mainLayer.eachLayer(function(layer) {
layer.on({
click: function() {
var scope = angular.element($("#main")).scope().showAttributeData(layer.feature.properties);
},
});
});
Furthermore, I recently started learning Angular a week ago. If you notice any errors or mistakes in the code, please feel free to point them out. Thank you!