为什么材料设计ui不能正常渲染？

Question

我正在使用AngularJS创建一个SPA，现在我正在实现角度材质，但我不知道为什么我的视图不能正常渲染，这是我遵循的sample但是我得到的是不一样的。

我的代码中没有任何问题，任何人都可以帮我搞清楚吗？（ngRoute不会在这个代码片段中运行，我知道，但我会用视图模板的结构替换ng-view）

'use strict';
var quaestio = angular.module('Quaestio', ['ngMaterial', 'ngMdIcons', 'ngRoute', 'smart-table']);

quaestio.config(function($routeProvider, $mdThemingProvider) {
  $routeProvider
    .when('/', {
      templateUrl: './views/home.html',
      controller: 'main-ctrl'
    })
    .when('/about', {
      templateUrl: "./views/about-company.html",
      controller: 'main-ctrl'
    })
    .when('/contact', {
      templateUrl: "./views/contact.html",
      controller: 'main-ctrl'
    })
    .when('/faq', {
      templateUrl: "./views/faq.html",
      controller: 'table-ctrl'
    })
    .when('/edit-faq', {
      templateUrl: "./views/edit-faq.html",
      controller: 'main-ctrl'
    })
    .when('/general', {
      templateUrl: "./views/general.html",
      controller: 'main-ctrl'
    })
    .when('/personnel', {
      templateUrl: "./views/about-personnel.html",
      controller: 'main-ctrl'
    })
    .when('/settings', {
      templateUrl: "./views/settings.html",
      controller: 'main-ctrl'
    })
    .when('/terms', {
      templateUrl: "./views/terms.html",
      controller: 'main-ctrl'
    })
    .otherwise({
      redirectTo: '/'
    });

  var customBlueMap = $mdThemingProvider.extendPalette('light-blue', {
    'contrastDefaultColor': 'light',
    'contrastDarkColors': ['50'],
    '50': 'ffffff'
  });
  $mdThemingProvider.definePalette('customBlue', customBlueMap);
  $mdThemingProvider.theme('default')
    .primaryPalette('customBlue', {
      'default': '500',
      'hue-1': '50'
    })
    .accentPalette('pink');
  $mdThemingProvider.theme('input', 'default')
    .primaryPalette('grey')
});

/**
 * Main Data and Functions Controller
 */
quaestio.controller('main-ctrl', function($scope, $http) {

  var refresh = function() {
    $http.get('/quaestioJS').
    success(function(data, status, headers, config) {
      $scope.resdata = data;
      $scope.limpiar();
    }).
    error(function(data, status, headers, config) {
      console.log("Errorazo.");
      console.log(data);
    });
  }

  refresh();

  $scope.agregar = function() {
    $scope.tmpdata.query = "INSERT INTO personas SET ?";
    $http.post('/quaestioJS', $scope.tmpdata).
    success(function(data, status, headers, config) {
      refresh();
      $scope.limpiar();
    }).
    error(function(data, status, headers, config) {
      console.log("Errorazo.");
      console.log(data);
    });
  }

  $scope.eliminar = function(id) {
    var query = "DELETE FROM personas WHERE ID = " + id;
    $http.delete('/quaestioJS/' + query).
    success(function(data, status, headers, config) {
      refresh();
      $scope.limpiar();
    }).
    error(function(data, status, headers, config) {
      console.log("Errorazo.");
      console.log(data);
    });
  }

  $scope.editar = function(id) {
    var query = "SELECT * FROM personas WHERE ID = " + id;
    $http.get('/quaestioJS/' + query).
    success(function(data, status, headers, config) {
      $scope.tmpdata = data[0];
      console.log();
    }).
    error(function(data, status, headers, config) {
      console.log("Errorazo.");
      console.log(data);
    });
  }

  $scope.actualizar = function() {
    $scope.tmpdata.query = "UPDATE personas SET ? WHERE ID = " + $scope.tmpdata.ID;
    $http.post('/quaestioJS', $scope.tmpdata).
    success(function(data, status, headers, config) {
      refresh();
      $scope.limpiar();
    }).
    error(function(data, status, headers, config) {
      console.log("Errorazo.");
      console.log(data);
    });
  }

  $scope.limpiar = function() {
    $scope.tmpdata = "";
  }
});

/**
 * Modern Design Controller
 */
quaestio.controller('md-ctrl', ['$scope', '$mdBottomSheet', '$mdSidenav', '$mdDialog', '$http', '$location',
  function($scope, $mdBottomSheet, $mdSidenav, $mdDialog, $http, $location) {
    $scope.colors = [{
      color: 'red'
    }, {
      color: 'blue'
    }, {
      color: 'green'
    }, {
      color: 'yellow'
    }];
    $scope.prueba = function(path) {
      $location.path(path);
    }
    $scope.menu = [

      {
        id: '/home',
        title: 'Inicio',
        icon: 'home'
      }, {
        id: '/about',
        title: 'Sobre La Empresa',
        icon: 'info'
      }, {
        id: '/personnel',
        title: 'Sobre Nosotros',
        icon: 'people'
      }, {
        id: '/terms',
        title: 'Terminos de Uso',
        icon: 'account_balance'
      }, {
        id: '/faq',
        title: 'Preguntas Frecuentes',
        icon: 'question_answer'
      }, {
        id: '/contact',
        title: 'Contactanos',
        icon: 'quick_contacts_mail'
      }, {
        id: '/communities',
        title: 'Comunidades',
        icon: 'extension'
      }, {
        id: '/general',
        title: 'Generalidades',
        icon: 'dashboard'
      }
    ];
    $scope.admin = [{
      link: '',
      title: 'Salir de sesion',
      icon: 'exit_to_app'
    }, {
      link: 'showListBottomSheet($event)',
      title: 'Configuracion',
      icon: 'settings'
    }];

    $scope.dynamicelements = {

      tabTitle: '',
      page: '',
      username: '',
      email: ''

    };

    $scope.alert = '';

    $scope.toggleSidenav = function(menuId) {
      $mdSidenav(menuId).toggle();
    };

    $scope.showListBottomSheet = function($event) {
      $scope.alert = '';
      $mdBottomSheet.show({
        templateUrl: 'views/settings.html',
        controller: 'ListBottomSheetCtrl',
        targetEvent: $event
      }).then(function(clickedItem) {
        $scope.alert = clickedItem.name + ' Clickeado!';
      });
    };

    $scope.showAdd = function(ev) {
      $mdDialog.show({
          controller: funcDialogController,
          template: '',
          targetEvent: ev
        })
        .then(function(answer) {
          $scope.alert = 'Dijiste que tu informacion era "' + answer + '".';
        }, function() {
          $scope.alert = 'Cancelaste la operacion.';
        });
    };
    $scope.funcChangePage = function(id) {
      $scope.dynamicelements.page = id;
      console.log(id);
    }
  }
]);

/**
 * Option Menu Controller
 */
quaestio.controller('options-ctrl', function($scope, $mdBottomSheet) {
  $scope.items = [{
    name: 'Subir',
    icon: 'upload'
  }, {
    name: 'Copiar',
    icon: 'copy'
  }, {
    name: 'Imprimir esta pagina',
    icon: 'print'
  }];

  $scope.listItemClick = function($index) {
    var clickedItem = $scope.items[$index];
    $mdBottomSheet.hide(clickedItem);
  };
});

/**
 * Data Table Controller
 */
quaestio.controller('table-ctrl', ['$scope',
  function($scope) {

    $scope.tabledata = [{
      date: new Date('1987-05-21'),
      question: 'Como se llama la compania?',
      answer: 'Quaestio'
    }, {
      date: new Date('1987-05-21'),
      question: 'Quienes lo empezaron?',
      answer: 'Carlos Cornejo y Jonathan Solorzano'
    }, {
      date: new Date('1987-05-21'),
      question: 'Como surgio?',
      answer: 'Como una start up.'
    }];


  }
]);

function funcDialogController($scope, $mdDialog) {
  $scope.hide = function() {
    $mdDialog.hide();
  };
  $scope.cancel = function() {
    $mdDialog.cancel();
  };
  $scope.answer = function(answer) {
    $mdDialog.hide(answer);
  };
};

quaestio.directive('userAvatar', function() {
  return {
    replace: true,
    templateUrl: './views/avatar.html'
  };
});

quaestio.directive('mdTable', function() {
  return {
    restrict: 'E',
    scope: {
      headers: '=',
      content: '=',
      sortable: '=',
      filters: '=',
      customClass: '=customClass',
      thumbs: '=',
      count: '='
    },
    controller: function($scope, $filter, $window) {
      var orderBy = $filter('orderBy');
      $scope.tablePage = 0;
      $scope.nbOfPages = function() {
          return Math.ceil($scope.content.length / $scope.count);
        },
        $scope.handleSort = function(field) {
          if ($scope.sortable.indexOf(field) > -1) {
            return true;
          } else {
            return false;
          }
        };
      $scope.order = function(predicate, reverse) {
        $scope.content = orderBy($scope.content, predicate, reverse);
        $scope.predicate = predicate;
      };
      $scope.order($scope.sortable[0], false);
      $scope.getNumber = function(num) {
        return new Array(num);
      };
      $scope.goToPage = function(page) {
        $scope.tablePage = page;
      };
    },
    template: angular.element(document.querySelector('#md-table-template')).html()
  }
});

md-content.md-default-theme {
  background-color: #eee;
}
md-card {
  background-color: #fff;
}
md-card h2:first-of-type {
  margin-top: 0;
}
md-toolbar .md-button.md-default-theme {
  border-radius: 99%;
}
h2 {
  font-weight: 400;
}
.md-toolbar-tools-bottom {
  font-size: small;
}
.md-toolbar-tools-bottom:last-child {
  opacity: 0.8;
}
md-toolbar:not(.md-hue-1),
.md-fab {
  fill: #fff;
}
md-sidenav {
  fill: #737373;
}
md-sidenav ng-md-icon {
  position: relative;
  top: 5px;
}
.user-avatar {
  border-radius: 99%;
}
.sites-list .md-button {
  color: inherit;
  text-align: left;
  width: 100%;
}

<!DOCTYPE html>
<html ng-app="Quaestio">

<head lang="es">
  <meta charset="UTF-8">
  <title>Quaestio - Administration</title>

  <!--Stylesheets ================================================================== -->
  <!-- Angular Material CSS now available via Google CDN; version 0.8 used here -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

</head>

<body layout="row" ng-controller="md-ctrl">

  <!-- Barra lateral izquierda ================================================================== -->
  <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">

    <md-toolbar class="md-tall md-hue-2">
      <!-- Inicio del toolbar donde se mostrara la informacion del usuario -->
      <span flex></span>
      <div layout="column" class="md-toolbar-tools-bottom inset">
        <user-avatar></user-avatar>
        <span></span>
        <div>{{dynamicelements.username}}</div>
        <div>{{dynamicelements.email}}</div>
      </div>
    </md-toolbar>
    <!-- /Fin de toolbar -->

    <md-list class="sites-list">
      <!-- Inicio de la lista de los sitios editables y opciones de sesion-->

      <md-item ng-repeat="item in menu">
        <!-- Inicio de la lista de los sitios  -->
        <md-item-content layout="row" layout-align="start center">
          <md-button md-ripple-size="full" ng-click="prueba(item.id)">
            <ng-md-icon icon="{{item.icon}}"></ng-md-icon>{{item.title}}
          </md-button>
        </md-item-content>
      </md-item>
      <!-- /Fin de lista de sitios -->

      <md-divider></md-divider>

      <md-subheader>Sesion</md-subheader>
      <md-item ng-repeat="item in admin">
        <!-- Inicio de la lista de opciones de sesion -->
        <md-item-content layout="row" layout-align="start center">
          <md-button md-ripple-size="full" ng-click="prueba(item.id)">
            <ng-md-icon icon="{{item.icon}}"></ng-md-icon>
            {{item.title}}
          </md-button>
        </md-item-content>
      </md-item>
      <!-- /Fin de opciones de sesion -->

    </md-list>
    <!-- /Fin de listado -->

  </md-sidenav>

  <!-- Body of App ================================================================================= -->
  <div layout="column" class="relative" layout-fill role="main">

    <md-button class="md-fab md-fab-bottom-right" aria-label="Add" ng-click="showAdd($event)">
      <!-- Boton agregar presente solo en el panel de usuarios -->
      <ng-md-icon icon="add"></ng-md-icon>
    </md-button>
    <!-- /Fin de boton -->

    <md-toolbar ng-show="!showSearch">
      <!--Inicio del toolbar de navegacion-->

      <div class="md-toolbar-tools">
        <!--Inicio del panel de opciones-->
        <md-button ng-click="toggleSidenav('left')" hide-gt-md aria-label="Menu">
          <ng-md-icon icon="menu"></ng-md-icon>
        </md-button>
        <h3>
                    Administracion - Quaestio
                </h3>
        <span flex></span>
        <md-button aria-label="Search" ng-click="showSearch = !showSearch">
          <ng-md-icon icon="search"></ng-md-icon>
        </md-button>
        <md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
          <ng-md-icon icon="more_vert"></ng-md-icon>
        </md-button>
      </div>
      <!--/Fin de panel de navegacion-->

      <md-tabs md-stretch-tabs class="md-primary" md-selected="">
        <!--Inicio de tabs de toolbar-->
        <md-tab id="tab1" aria-controls="tab1-content">
          {{dynamicelements.tabTitle}}
        </md-tab>
      </md-tabs>
      <!--/Fin de tabs-->

    </md-toolbar>
    <!--/Fin de toolbar-->

    <md-toolbar class="md-hue-1" ng-show="showSearch">
      <!--Inicio de toolbar de opciones para buscar-->
      <div class="md-toolbar-tools">
        <md-button ng-click="showSearch = !showSearch" aria-label="Back">
          <ng-md-icon icon="arrow_back"></ng-md-icon>
        </md-button>
        <h3 flex="10">
                    Atras
                </h3>
        <md-input-container md-theme="input" flex>
          <label>&nbsp;</label>
          <input ng-model="search.who" placeholder="Buscar">
        </md-input-container>
        <md-button aria-label="Search" ng-click="showSearch = !showSearch">
          <ng-md-icon icon="search"></ng-md-icon>
        </md-button>
        <md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
          <ng-md-icon icon="more_vert"></ng-md-icon>
        </md-button>
      </div>
    </md-toolbar>
    <!--/Fin de toolbar -->

    <md-content flex md-scroll>
      <!--Inicio del contenido de sitios-->
      <ui-view layout="column" layout-fill layout-padding>
        <div class="inset"></div>
        <md-card flex-gt-sm="90" flex-gt-md="80" flex-gt-lg="85">
          <md-card-content>
            <div layout="column" layout-sm="column" layout-padding style="padding: 24px;">
              <div class="row text-center">
                <h2>Informacion de Contacto</h2>
              </div>
              <md-divider md-inset></md-divider>
              <br />
              <br />
              <div class="row">
                <md-input-container class="md-icon-float">
                  <label>Correo</label>
                  <md-icon src="./files/img/correo.png"></md-icon>
                  <input />
                </md-input-container>
              </div>
              <div class="row">
                <md-input-container class="md-icon-float">
                  <label>Direccion</label>
                  <md-icon src="./files/img/direccion.png"></md-icon>
                  <input />
                </md-input-container>
              </div>
              <div class="row">
                <md-input-container class="md-icon-float">
                  <label>Telefono</label>
                  <md-icon src="./files/img/telefono.png"></md-icon>
                  <input />
                </md-input-container>
              </div>
              <div class="row">
                <md-input-container class="md-icon-float">
                  <label>Nombre de Compania</label>
                  <md-icon src="./files/img/compania.png"></md-icon>
                  <input />
                </md-input-container>
              </div>
            </div>

          </md-card-content>
        </md-card>
      </ui-view>
    </md-content>
    <!--/Fin de contenido de sitios-->

  </div>


  <!-- Dependecies ================================================================== -->
  <!-- Angular Material Dependencies -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>


  <!-- Angular Material Javascript now available via Google CDN; version 0.8 used here -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap.js"></script>
  <script src="//cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.0.3/smart-table.js"></script>
</body>

</html>

正如您在片段中看到的那样，输入标签位置不正确，动画有点慢，将鼠标放在搜索按钮上时的动画与示例中的不同。

Answer 1

您遇到的问题是由于bootstrap和角度材料之间的冲突。他们不能很好地团结在一起。您关注的示例不包括引导程序。您可以在下面的代码段中看到更好的对齐方式，而无需使用bootstrap：

＆＃13;

＆＃13;

'use strict';
var quaestio = angular.module('Quaestio', ['ngMaterial', 'ngMdIcons', 'ngRoute', 'smart-table']);

quaestio.config(function($routeProvider, $mdThemingProvider) {
  $routeProvider
    .when('/', {
      templateUrl: './views/home.html',
      controller: 'main-ctrl'
    })
    .when('/about', {
      templateUrl: "./views/about-company.html",
      controller: 'main-ctrl'
    })
    .when('/contact', {
      templateUrl: "./views/contact.html",
      controller: 'main-ctrl'
    })
    .when('/faq', {
      templateUrl: "./views/faq.html",
      controller: 'table-ctrl'
    })
    .when('/edit-faq', {
      templateUrl: "./views/edit-faq.html",
      controller: 'main-ctrl'
    })
    .when('/general', {
      templateUrl: "./views/general.html",
      controller: 'main-ctrl'
    })
    .when('/personnel', {
      templateUrl: "./views/about-personnel.html",
      controller: 'main-ctrl'
    })
    .when('/settings', {
      templateUrl: "./views/settings.html",
      controller: 'main-ctrl'
    })
    .when('/terms', {
      templateUrl: "./views/terms.html",
      controller: 'main-ctrl'
    })
    .otherwise({
      redirectTo: '/'
    });

  var customBlueMap = $mdThemingProvider.extendPalette('light-blue', {
    'contrastDefaultColor': 'light',
    'contrastDarkColors': ['50'],
    '50': 'ffffff'
  });
  $mdThemingProvider.definePalette('customBlue', customBlueMap);
  $mdThemingProvider.theme('default')
    .primaryPalette('customBlue', {
      'default': '500',
      'hue-1': '50'
    })
    .accentPalette('pink');
  $mdThemingProvider.theme('input', 'default')
    .primaryPalette('grey')
});

/**
 * Main Data and Functions Controller
 */
quaestio.controller('main-ctrl', function($scope, $http) {

  var refresh = function() {
    $http.get('/quaestioJS').
    success(function(data, status, headers, config) {
      $scope.resdata = data;
      $scope.limpiar();
    }).
    error(function(data, status, headers, config) {
      console.log("Errorazo.");
      console.log(data);
    });
  }

  refresh();

  $scope.agregar = function() {
    $scope.tmpdata.query = "INSERT INTO personas SET ?";
    $http.post('/quaestioJS', $scope.tmpdata).
    success(function(data, status, headers, config) {
      refresh();
      $scope.limpiar();
    }).
    error(function(data, status, headers, config) {
      console.log("Errorazo.");
      console.log(data);
    });
  }

  $scope.eliminar = function(id) {
    var query = "DELETE FROM personas WHERE ID = " + id;
    $http.delete('/quaestioJS/' + query).
    success(function(data, status, headers, config) {
      refresh();
      $scope.limpiar();
    }).
    error(function(data, status, headers, config) {
      console.log("Errorazo.");
      console.log(data);
    });
  }

  $scope.editar = function(id) {
    var query = "SELECT * FROM personas WHERE ID = " + id;
    $http.get('/quaestioJS/' + query).
    success(function(data, status, headers, config) {
      $scope.tmpdata = data[0];
      console.log();
    }).
    error(function(data, status, headers, config) {
      console.log("Errorazo.");
      console.log(data);
    });
  }

  $scope.actualizar = function() {
    $scope.tmpdata.query = "UPDATE personas SET ? WHERE ID = " + $scope.tmpdata.ID;
    $http.post('/quaestioJS', $scope.tmpdata).
    success(function(data, status, headers, config) {
      refresh();
      $scope.limpiar();
    }).
    error(function(data, status, headers, config) {
      console.log("Errorazo.");
      console.log(data);
    });
  }

  $scope.limpiar = function() {
    $scope.tmpdata = "";
  }
});

/**
 * Modern Design Controller
 */
quaestio.controller('md-ctrl', ['$scope', '$mdBottomSheet', '$mdSidenav', '$mdDialog', '$http', '$location',
  function($scope, $mdBottomSheet, $mdSidenav, $mdDialog, $http, $location) {
    $scope.colors = [{
      color: 'red'
    }, {
      color: 'blue'
    }, {
      color: 'green'
    }, {
      color: 'yellow'
    }];
    $scope.prueba = function(path) {
      $location.path(path);
    }
    $scope.menu = [

      {
        id: '/home',
        title: 'Inicio',
        icon: 'home'
      }, {
        id: '/about',
        title: 'Sobre La Empresa',
        icon: 'info'
      }, {
        id: '/personnel',
        title: 'Sobre Nosotros',
        icon: 'people'
      }, {
        id: '/terms',
        title: 'Terminos de Uso',
        icon: 'account_balance'
      }, {
        id: '/faq',
        title: 'Preguntas Frecuentes',
        icon: 'question_answer'
      }, {
        id: '/contact',
        title: 'Contactanos',
        icon: 'quick_contacts_mail'
      }, {
        id: '/communities',
        title: 'Comunidades',
        icon: 'extension'
      }, {
        id: '/general',
        title: 'Generalidades',
        icon: 'dashboard'
      }
    ];
    $scope.admin = [{
      link: '',
      title: 'Salir de sesion',
      icon: 'exit_to_app'
    }, {
      link: 'showListBottomSheet($event)',
      title: 'Configuracion',
      icon: 'settings'
    }];

    $scope.dynamicelements = {

      tabTitle: '',
      page: '',
      username: '',
      email: ''

    };

    $scope.alert = '';

    $scope.toggleSidenav = function(menuId) {
      $mdSidenav(menuId).toggle();
    };

    $scope.showListBottomSheet = function($event) {
      $scope.alert = '';
      $mdBottomSheet.show({
        templateUrl: 'views/settings.html',
        controller: 'ListBottomSheetCtrl',
        targetEvent: $event
      }).then(function(clickedItem) {
        $scope.alert = clickedItem.name + ' Clickeado!';
      });
    };

    $scope.showAdd = function(ev) {
      $mdDialog.show({
          controller: funcDialogController,
          template: '',
          targetEvent: ev
        })
        .then(function(answer) {
          $scope.alert = 'Dijiste que tu informacion era "' + answer + '".';
        }, function() {
          $scope.alert = 'Cancelaste la operacion.';
        });
    };
    $scope.funcChangePage = function(id) {
      $scope.dynamicelements.page = id;
      console.log(id);
    }
  }
]);

/**
 * Option Menu Controller
 */
quaestio.controller('options-ctrl', function($scope, $mdBottomSheet) {
  $scope.items = [{
    name: 'Subir',
    icon: 'upload'
  }, {
    name: 'Copiar',
    icon: 'copy'
  }, {
    name: 'Imprimir esta pagina',
    icon: 'print'
  }];

  $scope.listItemClick = function($index) {
    var clickedItem = $scope.items[$index];
    $mdBottomSheet.hide(clickedItem);
  };
});

/**
 * Data Table Controller
 */
quaestio.controller('table-ctrl', ['$scope',
  function($scope) {

    $scope.tabledata = [{
      date: new Date('1987-05-21'),
      question: 'Como se llama la compania?',
      answer: 'Quaestio'
    }, {
      date: new Date('1987-05-21'),
      question: 'Quienes lo empezaron?',
      answer: 'Carlos Cornejo y Jonathan Solorzano'
    }, {
      date: new Date('1987-05-21'),
      question: 'Como surgio?',
      answer: 'Como una start up.'
    }];


  }
]);

function funcDialogController($scope, $mdDialog) {
  $scope.hide = function() {
    $mdDialog.hide();
  };
  $scope.cancel = function() {
    $mdDialog.cancel();
  };
  $scope.answer = function(answer) {
    $mdDialog.hide(answer);
  };
};

quaestio.directive('userAvatar', function() {
  return {
    replace: true,
    templateUrl: './views/avatar.html'
  };
});

quaestio.directive('mdTable', function() {
  return {
    restrict: 'E',
    scope: {
      headers: '=',
      content: '=',
      sortable: '=',
      filters: '=',
      customClass: '=customClass',
      thumbs: '=',
      count: '='
    },
    controller: function($scope, $filter, $window) {
      var orderBy = $filter('orderBy');
      $scope.tablePage = 0;
      $scope.nbOfPages = function() {
          return Math.ceil($scope.content.length / $scope.count);
        },
        $scope.handleSort = function(field) {
          if ($scope.sortable.indexOf(field) > -1) {
            return true;
          } else {
            return false;
          }
        };
      $scope.order = function(predicate, reverse) {
        $scope.content = orderBy($scope.content, predicate, reverse);
        $scope.predicate = predicate;
      };
      $scope.order($scope.sortable[0], false);
      $scope.getNumber = function(num) {
        return new Array(num);
      };
      $scope.goToPage = function(page) {
        $scope.tablePage = page;
      };
    },
    template: angular.element(document.querySelector('#md-table-template')).html()
  }
});

＆＃13;

md-content.md-default-theme {
  background-color: #eee;
}
md-card {
  background-color: #fff;
}
md-card h2:first-of-type {
  margin-top: 0;
}
md-toolbar .md-button.md-default-theme {
  border-radius: 99%;
}
h2 {
  font-weight: 400;
}
.md-toolbar-tools-bottom {
  font-size: small;
}
.md-toolbar-tools-bottom:last-child {
  opacity: 0.8;
}
md-toolbar:not(.md-hue-1),
.md-fab {
  fill: #fff;
}
md-sidenav {
  fill: #737373;
}
md-sidenav ng-md-icon {
  position: relative;
  top: 5px;
}
.user-avatar {
  border-radius: 99%;
}
.sites-list .md-button {
  color: inherit;
  text-align: left;
  width: 100%;
}

＆＃13;

<!DOCTYPE html>
<html ng-app="Quaestio">

<head lang="es">
  <meta charset="UTF-8">
  <title>Quaestio - Administration</title>

  <!--Stylesheets ================================================================== -->
  <!-- Angular Material CSS now available via Google CDN; version 0.8 used here -->
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css">

</head>

<body layout="row" ng-controller="md-ctrl">

  <!-- Barra lateral izquierda ================================================================== -->
  <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">

    <md-toolbar class="md-tall md-hue-2">
      <!-- Inicio del toolbar donde se mostrara la informacion del usuario -->
      <span flex></span>
      <div layout="column" class="md-toolbar-tools-bottom inset">
        <user-avatar></user-avatar>
        <span></span>
        <div>{{dynamicelements.username}}</div>
        <div>{{dynamicelements.email}}</div>
      </div>
    </md-toolbar>
    <!-- /Fin de toolbar -->

    <md-list class="sites-list">
      <!-- Inicio de la lista de los sitios editables y opciones de sesion-->

      <md-item ng-repeat="item in menu">
        <!-- Inicio de la lista de los sitios  -->
        <md-item-content layout="row" layout-align="start center">
          <md-button md-ripple-size="full" ng-click="prueba(item.id)">
            <ng-md-icon icon="{{item.icon}}"></ng-md-icon>{{item.title}}
          </md-button>
        </md-item-content>
      </md-item>
      <!-- /Fin de lista de sitios -->

      <md-divider></md-divider>

      <md-subheader>Sesion</md-subheader>
      <md-item ng-repeat="item in admin">
        <!-- Inicio de la lista de opciones de sesion -->
        <md-item-content layout="row" layout-align="start center">
          <md-button md-ripple-size="full" ng-click="prueba(item.id)">
            <ng-md-icon icon="{{item.icon}}"></ng-md-icon>
            {{item.title}}
          </md-button>
        </md-item-content>
      </md-item>
      <!-- /Fin de opciones de sesion -->

    </md-list>
    <!-- /Fin de listado -->

  </md-sidenav>

  <!-- Body of App ================================================================================= -->
  <div layout="column" class="relative" layout-fill role="main">

    <md-button class="md-fab md-fab-bottom-right" aria-label="Add" ng-click="showAdd($event)">
      <!-- Boton agregar presente solo en el panel de usuarios -->
      <ng-md-icon icon="add"></ng-md-icon>
    </md-button>
    <!-- /Fin de boton -->

    <md-toolbar ng-show="!showSearch">
      <!--Inicio del toolbar de navegacion-->

      <div class="md-toolbar-tools">
        <!--Inicio del panel de opciones-->
        <md-button ng-click="toggleSidenav('left')" hide-gt-md aria-label="Menu">
          <ng-md-icon icon="menu"></ng-md-icon>
        </md-button>
        <h3>
                    Administracion - Quaestio
                </h3>
        <span flex></span>
        <md-button aria-label="Search" ng-click="showSearch = !showSearch">
          <ng-md-icon icon="search"></ng-md-icon>
        </md-button>
        <md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
          <ng-md-icon icon="more_vert"></ng-md-icon>
        </md-button>
      </div>
      <!--/Fin de panel de navegacion-->

      <md-tabs md-stretch-tabs class="md-primary" md-selected="">
        <!--Inicio de tabs de toolbar-->
        <md-tab id="tab1" aria-controls="tab1-content">
          {{dynamicelements.tabTitle}}
        </md-tab>
      </md-tabs>
      <!--/Fin de tabs-->

    </md-toolbar>
    <!--/Fin de toolbar-->

    <md-toolbar class="md-hue-1" ng-show="showSearch">
      <!--Inicio de toolbar de opciones para buscar-->
      <div class="md-toolbar-tools">
        <md-button ng-click="showSearch = !showSearch" aria-label="Back">
          <ng-md-icon icon="arrow_back"></ng-md-icon>
        </md-button>
        <h3 flex="10">
                    Atras
                </h3>
        <md-input-container md-theme="input" flex>
          <label>&nbsp;</label>
          <input ng-model="search.who" placeholder="Buscar">
        </md-input-container>
        <md-button aria-label="Search" ng-click="showSearch = !showSearch">
          <ng-md-icon icon="search"></ng-md-icon>
        </md-button>
        <md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
          <ng-md-icon icon="more_vert"></ng-md-icon>
        </md-button>
      </div>
    </md-toolbar>
    <!--/Fin de toolbar -->

    <md-content flex md-scroll>
      <!--Inicio del contenido de sitios-->
      <ui-view layout="column" layout-fill layout-padding>
        <div class="inset"></div>
        <md-card flex-gt-sm="90" flex-gt-md="80" flex-gt-lg="85">
          <md-card-content>
            <div layout="column" layout-sm="column" layout-padding style="padding: 24px;">
              <div class="row text-center">
                <h2>Informacion de Contacto</h2>
              </div>
              <md-divider md-inset></md-divider>
              <br />
              <br />
              <div class="row">
                <md-input-container class="md-icon-float">
                  <label>Correo</label>
                  <md-icon src="./files/img/correo.png"></md-icon>
                  <input />
                </md-input-container>
              </div>
              <div class="row">
                <md-input-container class="md-icon-float">
                  <label>Direccion</label>
                  <md-icon src="./files/img/direccion.png"></md-icon>
                  <input />
                </md-input-container>
              </div>
              <div class="row">
                <md-input-container class="md-icon-float">
                  <label>Telefono</label>
                  <md-icon src="./files/img/telefono.png"></md-icon>
                  <input />
                </md-input-container>
              </div>
              <div class="row">
                <md-input-container class="md-icon-float">
                  <label>Nombre de Compania</label>
                  <md-icon src="./files/img/compania.png"></md-icon>
                  <input />
                </md-input-container>
              </div>
            </div>

          </md-card-content>
        </md-card>
      </ui-view>
    </md-content>
    <!--/Fin de contenido de sitios-->

  </div>


  <!-- Dependecies ================================================================== -->
  <!-- Angular Material Dependencies -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>


  <!-- Angular Material Javascript now available via Google CDN; version 0.8 used here -->
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap.js"></script>
  <script src="//cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.js"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.0.3/smart-table.js"></script>
</body>

</html>

＆＃13;

＆＃13;

＆＃13;

单独使用角度材质或者如果必须使用AngularJS的引导程序，请查看我写的http://tilwinjoy.github.io/angular-bootstrap-material/。