Angularjs 使用带有聚合物的外部角元素
我正在自学如何使用Polymer[1.0],并试图实现一个数据网格。问题是…Polymer并没有一个数据网格作为基本的铁/纸/核心元素,所以我不得不出去找一个 幸运的是,有一个很好的遵循谷歌材料设计规范,所以 “我的页面”设置为有一个左侧页面抽屉、一个顶部标题和一个内容部分。我希望数据网格进入这个内容部分 我面临的问题是DOM似乎没有呈现数据网格组件表。就像它没有运行那些脚本并填充角度数据一样。我的理解是,这与聚合物元素的自包含方式有关,因此数据网格脚本无法达到这一点 通过将HTML放入Angularjs 使用带有聚合物的外部角元素,angularjs,polymer,polymer-1.0,polymer-starter-kit,Angularjs,Polymer,Polymer 1.0,Polymer Starter Kit,我正在自学如何使用Polymer[1.0],并试图实现一个数据网格。问题是…Polymer并没有一个数据网格作为基本的铁/纸/核心元素,所以我不得不出去找一个 幸运的是,有一个很好的遵循谷歌材料设计规范,所以 “我的页面”设置为有一个左侧页面抽屉、一个顶部标题和一个内容部分。我希望数据网格进入这个内容部分 我面临的问题是DOM似乎没有呈现数据网格组件表。就像它没有运行那些脚本并填充角度数据一样。我的理解是,这与聚合物元素的自包含方式有关,因此数据网格脚本无法达到这一点 通过将HTML放入test
test.HTML
文件,并将JS添加到测试HTML页面底部的
标记中,我已经成功地在本地运行了。一切都很好。当我尝试复制和粘贴到我的应用程序时,发生了一些事情,网格无法渲染
我的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>
解决了。这个解决方案很简单,对于那些知道他们在做什么的人来说是显而易见的 我应该提到,我也是Angular的新手,我忘记了最重要的
html
标记定义。这是解决办法
之前:
<html lang="">
<html lang="en" ng-app="demoApp" class="ng-scope">
之后:
<html lang="">
<html lang="en" ng-app="demoApp" class="ng-scope">
数据网格和默认聚合元素样式之间存在一些样式冲突,但这些冲突更容易解决。已解决。这个解决方案很简单,对于那些知道他们在做什么的人来说是显而易见的 我应该提到,我也是Angular的新手,我忘记了最重要的
html
标记定义。这是解决办法
之前:
<html lang="">
<html lang="en" ng-app="demoApp" class="ng-scope">
之后:
<html lang="">
<html lang="en" ng-app="demoApp" class="ng-scope">
数据网格和默认聚合元素样式之间存在一些样式冲突,但这些冲突更容易解决