使用具有Polymer的外部Angular元素

时间:2015-09-16 16:58:34

标签: angularjs polymer polymer-1.0 polymer-starter-kit

我在教自己如何使用Polymer [1.0],我正在尝试实现数据网格。问题是......聚合物没有数据网格作为基础铁/纸/核心元素,所以我不得不出去找一个。

幸运的是,有一个很好的遵循Google Material Design设计规范,所以my intention is to use this one

我的页面已设置为左页抽屉,顶部页眉和内容部分。我希望数据网格进入这个内容部分。

我面临的问题是DOM似乎没有呈现数据网格组件表。就好像它没有运行那些脚本并填充Angular数据。我的观点是它与Polymer元素的自包含方式有关,因此数据网格脚本没有达到它。

通过将HTML放入test.html文件,并将JS添加到测试HTML页面底部的<script>标记,我已在本地成功运行this Codepen。一切都很好。当我尝试复制并粘贴到我的应用程序中时,会发生一些事情并且网格不会呈现。

我的index.html代码如下:

<!doctype html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="generator" content="Project Emerald" />
  <title>Data Grid</title>

  <!-- build:css styles/main.css -->
  <link rel="stylesheet" href="styles/main.css">
  <!-- endbuild-->

  <!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
  <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
  <!-- endbuild -->

  <!-- will be replaced with elements/elements.vulcanized.html -->
  <link rel="import" href="elements/elements.html">
  <!-- endreplace-->

  <!-- Custom SCSS Styles -->
  <link rel="stylesheet" href="styles/scss/styles.css">

  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.css">
  <link rel="stylesheet" href="http://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.css">

</head>

<body unresolved class="fullbleed layout vertical">

  <paper-drawer-panel id="paperDrawerPanel">
    <!-- Drawer Scroll Header Panel -->
    <paper-scroll-header-panel drawer fixed>

      <!-- Drawer Toolbar -->
      <paper-toolbar id="drawerToolbar">
        <img src="images/dark-green.svg" class="app-logo" />
      </paper-toolbar>

      <!-- Drawer Content -->
      <paper-menu class="list" attr-for-selected="data-route" selected="[[route]]">
        <a data-route="inbox" href="#">
          <iron-icon icon="inbox"></iron-icon>
          <span>Inbox</span>
        </a>
        <a data-route="outbox" href="#">
          <iron-icon icon="send"></iron-icon>
          <span>Outbox</span>
        </a>
        <a data-route="trash" href="#">
          <iron-icon icon="delete"></iron-icon>
          <span>Trash</span>
        </a>
        <a data-route="spam" href="#">
          <iron-icon icon="report"></iron-icon>
          <span>Spam</span>
        </a>
        <paper-submenu>
          <div class="menu-trigger">
            <a data-route="forum" href="#">
              <iron-icon icon="question-answer"></iron-icon>
              <span>Forums</span>
            </a>
          </div>
          <paper-menu class="menu-content">
            <paper-item>General</paper-item>
            <paper-item>UI/UX</paper-item>
            <paper-item>Frontend Dev</paper-item>
            <paper-item>Graphic Design</paper-item>
            <paper-item>Photography</paper-item>
          </paper-menu>
        </paper-submenu>
        <a data-route="updates" href="#">
          <iron-icon icon="flag"></iron-icon>
          <span>Updates</span>
        </a>
        <a data-route="promos" href="#">
          <iron-icon icon="card-membership"></iron-icon>
          <span>Promos</span>
        </a>
      </paper-menu>

    </paper-scroll-header-panel>

    <!-- Main Area -->
    <paper-scroll-header-panel main fixed>

      <!-- Main Toolbar -->
      <paper-toolbar id="mainToolbar">
        <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>

        <!-- Application name -->
        <div class="top top-container center horizontal layout flex">
          <div class="title">Grid Title</div>
        </div>

        <!-- Toolbar icons -->
        <paper-icon-button icon="filter-list"></paper-icon-button>
        <paper-icon-button icon="search"></paper-icon-button>
      </paper-toolbar>

      <!-- Main Content -->
      <div class="content cards layout">

        <md-content layout="column" flex>
          <md-card ng-controller="nutritionController">
            <md-data-table-toolbar ng-show="!selected.length">
              <h2 class="md-title">Nutrition</h2>
            </md-data-table-toolbar>

            <md-data-table-toolbar class="alternate" ng-show="selected.length">
              <div>{{selected.length}} {{selected.length > 1 ? 'items' : 'item'}} selected</div>
            </md-data-table-toolbar>

            <md-data-table-container>
              <table md-data-table class="md-primary" md-row-select="selected" md-progress="deferred">
                <thead md-order="query.order" md-trigger="onorderchange">
                  <tr>
                    <th order-by="name" name="Dessert" unit="100g serving"></th>
                    <th order-by="type" name="Type"></th>
                    <th numeric order-by="calories.value" name="Calories"></th>
                    <th numeric unit="g" order-by="fat.value" name="Fat"></th>
                    <th numeric unit="g" order-by="carbs.value" name="Carbs"></th>
                    <th numeric unit="g" order-by="protein.value" name="Protein"></th>
                    <th numeric unit="mg" order-by="sodium.value" name="Sodium"></th>
                    <th numeric unit="%" order-by="calcium.value" name="Calcium"></th>
                    <th numeric unit="%" order-by="iron.value" name="Iron"></th>
                  </tr>
                </thead>
                <tbody>
                  <tr md-auto-select md-disable-select="dessert.name === 'Jelly bean'" ng-repeat="dessert in desserts.data | orderBy: query.order | limitTo: query.limit: (query.page - 1) * query.limit">
                    <td>{{dessert.name}}</td>
                    <td>
                      <md-select ng-model="dessert.type" placeholder="Other">
                        <md-option ng-value="type" ng-repeat="type in getTypes()">{{type}}</md-option>
                      </md-select>
                    </td>
                    <td>{{dessert.calories.value}}</td>
                    <td>{{dessert.fat.value | number: 2}}</td>
                    <td>{{dessert.carbs.value}}</td>
                    <td>{{dessert.protein.value | number: 2}}</td>
                    <td>{{dessert.sodium.value}}</td>
                    <td show-unit>{{dessert.calcium.value}}</td>
                    <td show-unit>{{dessert.iron.value}}</td>
                  </tr>
                </tbody>
              </table>
            </md-data-table-container>

            <md-data-table-pagination md-limit="query.limit" md-page="query.page" md-total="{{desserts.count}}" md-trigger="onpagechange"></md-data-table-pagination>
          </md-card>
        </md-content>

      </div>
    </paper-scroll-header-panel>
  </paper-drawer-panel>

  <!-- build:js scripts/app.js -->
  <script src="scripts/app.js"></script>
  <!-- endbuild-->

  <!-- Core jQuery -->
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

  <!-- Data table libraries -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.1/angular-material.min.js"></script>
  <script src="http://rawgit.com/daniel-nagy/md-data-table/master/dist/md-data-table.js"></script>

  <script src="bower_components/md-data-table/dist/sample.js"></script>

</body>

</html>

sample.js的代码:

angular.module('demoApp', ['ngMaterial', 'md.data.table'])

.controller('nutritionController', ['$q', '$scope', '$timeout', function ($q, $scope, $timeout) {

  $scope.selected = [];

  $scope.query = {
    order: 'name',
    limit: 5,
    page: 1
  };

  $scope.desserts = {
    "count": 9,
    "data": [
      {
        "name": "Frozen yogurt",
        "type": "Ice cream",
        "calories": { "value": 159.0 },
        "fat": { "value": 6.0 },
        "carbs": { "value": 24.0 },
        "protein": { "value": 4.0 },
        "sodium": { "value": 87.0 },
        "calcium": { "value": 14.0 },
        "iron": { "value": 1.0 }
      }, {
        "name": "Ice cream sandwich",
        "type": "Ice cream",
        "calories": { "value": 237.0 },
        "fat": { "value": 9.0 },
        "carbs": { "value": 37.0 },
        "protein": { "value": 4.3 },
        "sodium": { "value": 129.0 },
        "calcium": { "value": 8.0 },
        "iron": { "value": 1.0 }
      }, {
        "name": "Eclair",
        "type": "Pastry",
        "calories": { "value":  262.0 },
        "fat": { "value": 16.0 },
        "carbs": { "value": 24.0 },
        "protein": { "value":  6.0 },
        "sodium": { "value": 337.0 },
        "calcium": { "value":  6.0 },
        "iron": { "value": 7.0 }
      }, {
        "name": "Cupcake",
        "type": "Pastry",
        "calories": { "value":  305.0 },
        "fat": { "value": 3.7 },
        "carbs": { "value": 67.0 },
        "protein": { "value": 4.3 },
        "sodium": { "value": 413.0 },
        "calcium": { "value": 3.0 },
        "iron": { "value": 8.0 }
      }, {
        "name": "Jelly bean",
        "type": "Candy",
        "calories": { "value":  375.0 },
        "fat": { "value": 0.0 },
        "carbs": { "value": 94.0 },
        "protein": { "value": 0.0 },
        "sodium": { "value": 50.0 },
        "calcium": { "value": 0.0 },
        "iron": { "value": 0.0 }
      }, {
        "name": "Lollipop",
        "type": "Candy",
        "calories": { "value": 392.0 },
        "fat": { "value": 0.2 },
        "carbs": { "value": 98.0 },
        "protein": { "value": 0.0 },
        "sodium": { "value": 38.0 },
        "calcium": { "value": 0.0 },
        "iron": { "value": 2.0 }
      }, {
        "name": "Honeycomb",
        "type": "Other",
        "calories": { "value": 408.0 },
        "fat": { "value": 3.2 },
        "carbs": { "value": 87.0 },
        "protein": { "value": 6.5 },
        "sodium": { "value": 562.0 },
        "calcium": { "value": 0.0 },
        "iron": { "value": 45.0 }
      }, {
        "name": "Donut",
        "type": "Pastry",
        "calories": { "value": 452.0 },
        "fat": { "value": 25.0 },
        "carbs": { "value": 51.0 },
        "protein": { "value": 4.9 },
        "sodium": { "value": 326.0 },
        "calcium": { "value": 2.0 },
        "iron": { "value": 22.0 }
      }, {
        "name": "KitKat",
        "type": "Candy",
        "calories": { "value": 518.0 },
        "fat": { "value": 26.0 },
        "carbs": { "value": 65.0 },
        "protein": { "value": 7.0 },
        "sodium": { "value": 54.0 },
        "calcium": { "value": 12.0 },
        "iron": { "value": 6.0 }
      }
    ]
  };

  $scope.getTypes = function () {
    return ['Candy', 'Ice cream', 'Other', 'Pastry'];
  };

  $scope.onpagechange = function(page, limit) {
    var deferred = $q.defer();

    $timeout(function () {
      deferred.resolve();
    }, 2000);

    return deferred.promise;
  };

  $scope.onorderchange = function(order) {
    var deferred = $q.defer();

    $timeout(function () {
      deferred.resolve();
    }, 2000);

    return deferred.promise;
  };
}]);

1 个答案:

答案 0 :(得分:0)

解决。解决方案很简单,对于那些知道他们在Angular方面做了什么的人来说,这一点很明显。

我应该提到我也是Angular的新手,我忘记了所有重要的html标签定义。这是修复。

<强>之前:

<html lang="">

<强>后:

<html lang="en" ng-app="demoApp" class="ng-scope">

数据网格和默认的Polymer元素样式之间存在一些样式冲突,但这些样式更容易理清。