Angular Material Layout

by masa671

HTML

<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
  <div id='main' ng-app="MapApp" ng-cloak>
 <div layout="column" ng-controller="layerProvider">
                                        <md-input-container style="width:90%">
                                            <label>Provider Data</label>
                                            <md-select ng-model="provider" ng-change="providerWasChange()">
                                                <md-option><em>None</em></md-option>
                                                <md-option ng-repeat="provider in providers" ng-value="provider">
                                                    {{provider.displayNmae}}
                                                </md-option>
                                            </md-select>
                                        </md-input-container>
                                        <provider> </provider>
                                    </div>
                                     </div>

JavaScript

angular.module('MapApp', ['ngMaterial', 'ngMessages'])
    .directive('provider', ['$compile', '$http', '$templateCache', function($compile, $http, $templateCache) {

        var getTemplate = function(contentType) {
            var templateLoader,
                baseUrl = './templates/',
                templateMap = {
                    GeoJSONProvider: 'GeoJSONProvider.html',
                    MapServiceAgsProvider: 'MapServiceAgsProvider.html',
                    TileProvider: 'TileProvider.html'
                };

            var templateUrl = baseUrl + templateMap[contentType];
            templateLoader = $http.get(templateUrl, {
                cache: $templateCache
            });

            return templateLoader;

        }

        var linker = function(scope, element, attrs) {
            scope.$watch(function() {
                return scope.$parent.provider;
            }, function(newVal, oldVal, scope) {
                if (newVal !== undefined) {
                    loader();
                }
            });

            function loader() {
                if (scope.$parent.provider && typeof(scope.$parent.provider) !== 'string') {
                    var loader = getTemplate(scope.$parent.provider.name);

                    var promise = loader.success(function(html) {
                        element.html(html);
                    }).then(function(response) {
                        element.replaceWith($compile(element.html())(scope));
                    });
                }
            }
            loader();
        }

        return {
            transclude: true,
            restrict: 'E',
            scope: {
                provider: '@'
            },
            link: linker
        };
    }]).controller('layerProvider', function($scope, $timeout, $mdSidenav, $mdDialog, $mdMedia, $mdToast) {
        $scope.provider = '';
        $scope.providers = [{
            name: 'jsonProvider',
            displayNmae: "jsonProvider"
 ...