0
我試圖將聚合物的核心動畫頁面元素應用於我的元素時出現錯誤。無法應用JS的核心動畫頁面轉換
我搜索了錯誤代碼，缺少鏈接元素，缺少導入，樣式，並且什麼也沒找到。
這個想法是針對一個小應用程序，一旦你點擊登錄按鈕，顯示在一個自定義的登錄框中，它將改變登錄到一個新的部分。
這裏是我的代碼：
內容page.html中
<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="components/core-animated-pages/transitions/slide-from-right.html">
<link rel="import" href="components/paper-login-box-master/paper-login-box.html">
<polymer-element name="content-page" attributes="sel user pass">
<template>
<style>
#section {
background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230)) 0% 0% repeat scroll transparent;
}
#core_animated_pages {
width: 100%;
height: 100%;
overflow: hidden;
left: 0px;
top: 0px;
position: absolute;
background-color: rgb(238, 238, 238);
}
core-pages-animated transitions {
width: 100%;
height: 100%;
}
paper-loginbox {
margin-top: 50px;
}
</style>
<core-animated-pages selected="{{ sel }}" transitions="fade-scale">
<section>
<div layout vertical center ng-controller="LoginController">
<paper-loginbox user="{{ user }}" pass="{{ pass }}" on-login="{{ login }}"></paper-loginbox>
</div>
</section>
<section>
<div center>OLA</div>
</section>
</core-animated-pages>
</template>
<!--
<script>
var tabs = document.querySelector('paper-tabs');
tabs.addEventListener('core-select', function() {
console.log("Selected: " + tabs.selected);
});
</script>
-->
<script>
Polymer({
sel: 0,
user: "",
pass: "",
login: function() {
this.fire("login");
},
ngMapping: {
ngSel: {
primitive: 'sel'
},
ngUser: {
primitive: 'user'
},
ngPass: {
primitive: 'pass'
},
ngLogin: {
event: "login"
}
}
});
</script>
</polymer-element>
index.html的，我所說的元素和更改選定
<!DOCTYPE html>
<html ng-app="loginApp">
<head>
<title>RecordStore - A sua loja de albuns preferida</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
<meta name="description" content="Encomenda de albuns (Fictício)" />
<script src="components/webcomponentsjs/webcomponents.js">
</script>
<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="components/font-roboto/roboto.html">
<link rel="import" href="components/core-scroll-header-panel/core-scroll-header-panel.html">
<link rel="import" href="components/core-toolbar/core-toolbar.html">
<link rel="import" href="components/paper-tabs/paper-tabs.html">
<link rel="import" href="components/core-icon/core-icon.html">
<link rel="import" href="components/core-icons/social-icons.html">
<link rel="import" href="components/core-icon-button/core-icon-button.html">
<link rel="import" href="content-page.html">
<style>
html,body {
height: 100%;
margin: 0;
background-color: #E5E5E5;
font-family: 'RobotoDraft', sans-serif;
}
#core_scroll_header_panel {
width: 100%;
height: 100%;
position: absolute;
}
core-toolbar {
background: #800000;
color: white;
}
#tabs {
width: 100%;
margin: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-transform: uppercase;
}
paper-loginbox {
margin-top: 50px;
}
</style>
</head>
<body unresolved>
<core-scroll-header-panel headermargin="85.33333333333334" keepcondensedheader headerheight="128" id="core_scroll_header_panel" >
<core-toolbar id="core_toolbar" class="medium-tall" layout horizontal>
<div class="bottom">
<core-icon icon="store"></core-icon>
<paper-item disabled>Loja</paper-item>
<!--
<core-icon-button icon="post-github"></core-icon-button>
<paper-tabs id="tabs" selected="all" center horizontal layout class="bottom fit">
<paper-tab name="all" layout horizontal center-center flex inline active>All</paper-tab>
<paper-tab name="favorites" layout horizontal center-center flex inline active>Favorites</paper-tab>
</paper-tabs>
-->
</div>
</core-toolbar>
<content-page ng-polymer ng-sel="coise" ng-user="user" ng-pass="upass" ng-login="onlogin()"></content-page>
</core-scroll-header-panel>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="ng-polymer-elements-master/ng-polymer-elements.min.js"></script>
<script>
angular.module('loginApp', ['ng-polymer-elements'])
.controller('LoginController', ['$scope', function($scope) {
$scope.user = "lala";
$scope.onlogin = function() {
$scope.upass = $scope.user;
$scope.coise = 1;
};
}]);
</script>
</body>
</html>
的價值這是我收到的錯誤：
Exception caught during observer callback: TypeError: Cannot read property 'classList' of undefined
at core-animated-pages.Polymer.applySelection (http://localhost/components/core-selector/core-selector.html:454:15)
at core-animated-pages.Polymer.selectedItemChanged (http://localhost/components/core-animated-pages/core-animated-pages.html:418:14)
at core-animated-pages.properties.invokeMethod (http://localhost/components/polymer/polymer.js:9355:12)
at core-animated-pages.properties.notifyPropertyChanges (http://localhost/components/polymer/polymer.js:9344:20)
at Object.Observer.report_ (http://localhost/components/polymer/polymer.js:4890:24)
at Object.createObject.check_ (http://localhost/components/polymer/polymer.js:5296:12)
at callback (http://localhost/components/polymer/polymer.js:4788:20)
你在哪裏更新sel'的'的價值，你在更新它至？ （你可以在https://github.com/Polymer/core-selector/blob/master/core-selector.html#L454查看異常情況） – 2014-12-01 17:34:33
我使用AngularJS來更新'sel'的值到'1' – 2014-12-01 17:56:04
修正：在索引文件的CSS上，'core-toolbar'應該是'＃core-toolbar'和content-page文件，'＃core_animated_pages' 然而佈局並沒有結束，因爲我假裝，它現在會工作。 謝謝你的幫助 – 2014-12-01 18:54:02