ng-view 未关注 1 个视图的 CSS
ng-view not following CSS of 1 View
由于一个小的格式问题，我的头撞到了键盘。
我正在使用 ng-view，它似乎显示了索引视图（使用“#/”路径的主视图），但没有正确的砌体 CSS 格式，但它确实显示了其他视图（它们是不是砌体格式）正确。这是代码：
使用 Ng-view 时未格式化：
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="description" content="This is an example of a meta description. This will often show up in search results.">
<title>ROBTG4</title>
<link rel="shortcut icon" href="img/favicon.png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- /Mobile Icon (Home Screen Icon) -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300,400,700,900&subset=latin,latin-ext">
<link rel="stylesheet" href="css/slick.css"/>
<link rel="stylesheet" href="css/revolution-slider.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/min/font-awesome.min.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/widgets.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- /Include CSS Files -->
<!-- SCRIPT -->
<!-- Angular JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="js/app.js"></script>
<!-- END SCRIPT -->
</head>
<body class="nav-side" ng-controller="mainController">
<div class="site" >
<!-- SVGs -->
<svg style="display: none;">
<symbol viewBox="0 0 96 96" id="shape-arrow-left-light">
<title>arrow-left-light</title>
<path d="M84,44H21.656l21.456-21.456c1.562-1.562,1.562-4.095,0.001-5.657c-1.562-1.562-4.096-1.562-5.658,0L9.172,45.171l0,0 c-0.186,0.186-0.352,0.391-0.498,0.61c-0.067,0.101-0.114,0.21-0.171,0.315c-0.067,0.124-0.142,0.242-0.196,0.373 c-0.056,0.135-0.088,0.276-0.129,0.416c-0.032,0.111-0.075,0.217-0.098,0.331C8.028,47.475,8,47.737,8,48l0,0 c0,0.003,0.001,0.005,0.001,0.008c0,0.259,0.027,0.519,0.078,0.774c0.024,0.121,0.069,0.232,0.104,0.349 c0.039,0.133,0.07,0.268,0.123,0.397c0.058,0.139,0.136,0.265,0.208,0.396c0.054,0.098,0.096,0.198,0.159,0.292 c0.147,0.221,0.314,0.427,0.501,0.614l28.282,28.281c1.562,1.562,4.095,1.562,5.657,0.001c1.562-1.562,1.562-4.096,0-5.658 L21.657,52H84c2.209,0,4-1.791,4-4S86.209,44,84,44z"/>
</symbol>
<symbol viewBox="0 0 96 96" id="shape-arrow-left">
<title>arrow-left</title>
<path d="M84,44H21.656l21.456-21.456c1.562-1.562,1.562-4.095,0.001-5.657c-1.562-1.562-4.096-1.562-5.658,0L9.172,45.171l0,0 c-0.186,0.186-0.352,0.391-0.498,0.61c-0.067,0.101-0.114,0.21-0.171,0.315c-0.067,0.124-0.142,0.242-0.196,0.373 c-0.056,0.135-0.088,0.276-0.129,0.416c-0.032,0.111-0.075,0.217-0.098,0.331C8.028,47.475,8,47.737,8,48l0,0 c0,0.003,0.001,0.005,0.001,0.008c0,0.259,0.027,0.519,0.078,0.774c0.024,0.121,0.069,0.232,0.104,0.349 c0.039,0.133,0.07,0.268,0.123,0.397c0.058,0.139,0.136,0.265,0.208,0.396c0.054,0.098,0.096,0.198,0.159,0.292 c0.147,0.221,0.314,0.427,0.501,0.614l28.282,28.281c1.562,1.562,4.095,1.562,5.657,0.001c1.562-1.562,1.562-4.096,0-5.658 L21.657,52H84c2.209,0,4-1.791,4-4S86.209,44,84,44z"/>
</symbol>
<symbol viewBox="0 0 96 96" id="shape-arrow-right-light">
<title>arrow-right-light</title>
<path d="M12,52h62.344L52.888,73.456c-1.562,1.562-1.562,4.095-0.001,5.656c1.562,1.562,4.096,1.562,5.658,0l28.283-28.284l0,0 c0.186-0.186,0.352-0.391,0.498-0.609c0.067-0.101,0.114-0.21,0.172-0.315c0.066-0.124,0.142-0.242,0.195-0.373 c0.057-0.135,0.089-0.275,0.129-0.415c0.033-0.111,0.076-0.217,0.099-0.331C87.973,48.525,88,48.263,88,48l0,0 c0-0.003-0.001-0.006-0.001-0.009c-0.001-0.259-0.027-0.519-0.078-0.774c-0.024-0.12-0.069-0.231-0.104-0.349 c-0.039-0.133-0.069-0.268-0.123-0.397c-0.058-0.139-0.136-0.265-0.208-0.396c-0.054-0.098-0.097-0.198-0.159-0.292 c-0.146-0.221-0.314-0.427-0.501-0.614L58.544,16.888c-1.562-1.562-4.095-1.562-5.657-0.001c-1.562,1.562-1.562,4.095,0,5.658 L74.343,44L12,44c-2.209,0-4,1.791-4,4C8,50.209,9.791,52,12,52z"/>
</symbol>
<symbol viewBox="0 0 96 96" id="shape-arrow-right">
<title>arrow-right</title>
<path d="M12,52h62.344L52.888,73.456c-1.562,1.562-1.562,4.095-0.001,5.656c1.562,1.562,4.096,1.562,5.658,0l28.283-28.284l0,0 c0.186-0.186,0.352-0.391,0.498-0.609c0.067-0.101,0.114-0.21,0.172-0.315c0.066-0.124,0.142-0.242,0.195-0.373 c0.057-0.135,0.089-0.275,0.129-0.415c0.033-0.111,0.076-0.217,0.099-0.331C87.973,48.525,88,48.263,88,48l0,0 c0-0.003-0.001-0.006-0.001-0.009c-0.001-0.259-0.027-0.519-0.078-0.774c-0.024-0.12-0.069-0.231-0.104-0.349 c-0.039-0.133-0.069-0.268-0.123-0.397c-0.058-0.139-0.136-0.265-0.208-0.396c-0.054-0.098-0.097-0.198-0.159-0.292 c-0.146-0.221-0.314-0.427-0.501-0.614L58.544,16.888c-1.562-1.562-4.095-1.562-5.657-0.001c-1.562,1.562-1.562,4.095,0,5.658 L74.343,44L12,44c-2.209,0-4,1.791-4,4C8,50.209,9.791,52,12,52z"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-arrow-thin-left">
<title>arrow-thin-left</title>
<g>
<polyline fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" points="37,15 20,32
37,49 "/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-arrow-thin-right">
<title>arrow-thin-right</title>
<g>
<polyline fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" points="27,15 44,32
27,49 "/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-browser-search">
<title>browser-search</title>
<rect x="1" y="7" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="50"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="1" y1="15" x2="63" y2="15"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="10" y1="11" x2="6" y2="11"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="18" y1="11" x2="14" y2="11"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="26" y1="11" x2="22" y2="11"/>
<g>
<circle fill="none" stroke-width="2" stroke-miterlimit="10" cx="29" cy="33" r="6"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="33" y1="37" x2="41" y2="45"/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-cup">
<title>cup</title>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M16,27c0,4.418,6.059,8,16,8s16-3.582,16-8V1H16V27z
"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="20" y1="63" x2="44" y2="63"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="32" y1="35" x2="32" y2="63"/>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M16,7H7c0,0,0,9,9,9"/>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M48,7h9c0,0,0,9-9,9"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-heart">
<title>heart</title>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M1,21c0,20,31,38,31,38s31-18,31-38
c0-8.285-6-16-15-16c-8.285,0-16,5.715-16,14c0-8.285-7.715-14-16-14C7,5,1,12.715,1,21z"/>
</symbol>
<symbol viewBox="0 0 28 15" id="shape-indicator">
<title>indicator</title>
<path class="st0" fill="#e8e8e8" d="M13.5,0L15,1.4L1.4,15L0,13.5L13.5,0z"/>
<path class="st0" fill="#e8e8e8" d="M28,13.5L26.5,15L13,1.4L14.4,0L28,13.5z"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-laptop">
<title>laptop</title>
<g>
<rect x="8" y="12" fill="none" stroke-width="2" stroke-miterlimit="10" width="48" height="34"/>
<rect x="1" y="46" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="6"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="34" y1="16" x2="30" y2="16"/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-layers">
<title>layers</title>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="18,26.066 2,33 32,45 62,33 46,26.067 "/>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="18,39.066 2,46 32,58 62,46 46,39.067 "/>
<polygon fill="none" stroke-width="2" stroke-miterlimit="10" points="32,32 62,20 32,7 2,20 "/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-layout-4boxes">
<title>layout-4boxes</title>
<rect x="1" y="1" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="14"/>
<rect x="1" y="39" fill="none" stroke-width="2" stroke-miterlimit="10" width="31" height="24"/>
<rect x="32" y="39" fill="none" stroke-width="2" stroke-miterlimit="10" width="31" height="24"/>
<rect x="1" y="15" fill="none" stroke-width="2" stroke-miterlimit="10" width="31" height="24"/>
<rect x="32" y="15" fill="none" stroke-width="2" stroke-miterlimit="10" width="31" height="24"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-layout-sideleft">
<title>layout-sideleft</title>
<rect x="1" y="1" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="14"/>
<rect x="1" y="15" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="48"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="22" y1="15" x2="22" y2="63"/>
</symbol>
<symbol viewBox="0 0 289.3 286.2" id="shape-logo">
<title>logo</title>
<style type="text/css">
<![CDATA[ .st0{fill-rule:evenodd;clip-rule:evenodd;} ]]>
</style>
<path class="st0" d="M267.1,143.3L267.1,143.3L267.1,143.3z M199.6,63.3c-14.3-9.2-30.7-15.2-47.7-16.2c-34.3-0.1-68.7-0.1-103,0
c-0.3,57.1-0.1,114.1-0.1,171.2c-0.1,9,0.2,18.1-0.2,27.2l-23.4-22.8c0-0.3,0-0.6-0.1-0.9c-0.3-5.3-0.1-10.6-0.1-15.9
C25,145,24.7,84.1,25,23.3h122.1c1.1,0,2.2,0,3.3,0c0.1,0,0.1,0,0.2,0c0,0,0,0,0.1,0c64.4,1.9,116.5,55.1,116.5,120
c0,51.7-33.1,96-79.2,112.8c-0.2,0.1-0.4,0.2-0.6,0.2c-0.9,0.3-1.8,0.6-2.7,0.9c0,0,0,0,0,0c-3,1-6,1.8-9,2.5c-4,1-8.1,1.8-12.2,2.4
c0,0,0,0,0,0c-2.3,0.4-4.7,0.7-7,1c-1.7,0-3.4,0-5.1,0c-1.4,0-2.7,0.1-4.1,0.1h-8.7c-6,0-12,0-17.9,0c-8.9,0-17.9,0-26.8,0
c-7,0-13.9,0-20.9-0.1v-0.7v-0.7v-0.7v-0.7v-0.7v-189h73.5c40.4,0,73.4,33.1,73.4,73.4c0,30-18.2,55.9-44.1,67.3
c-9,4-19,6.2-29.4,6.2h-25.7v-24.3V94.9l-23.9,0l0,122.7l0,21.8c8,0.1,15.9,0.1,23.9,0.1c11.6,0,23.2,0,34.8-0.1
c7-0.6,13.8-2,20.4-4.2c21.5-7.1,40.3-22,52.3-41.3c7.7-12.9,13.1-27.6,13.6-42.7c0.8-4.9,1-10,0.2-15
C240,107.2,223.5,79.8,199.6,63.3L199.6,63.3z M25,255l8.4,8.3l23.3,22.9h63.7h25.7c10.1,0,19.9-1.1,29.4-3.1
c64.7-13.7,113.7-71.4,113.7-140.1C289.3,64.4,224.9,0,146.2,0H0c0.1,76.6,0,153.2,0,229.8c0,0.2,0,0.4,0,0.6L25,255z"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-mail-heart">
<title>mail-heart</title>
<g>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="1,26 32,45.434 63,26 "/>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="11.334,21.667 1,26 1,63 63,63 63,26
63,26 52.666,21.667 "/>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="11,32 11,1 53,1 53,32 "/>
</g>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M22,19c0,6.666,10,12,10,12s10-5.334,10-12
c0-2.762-2-5-5-5c-2.762,0-5,2.238-5,5c0-2.762-2.238-5-5-5C24,14,22,16.238,22,19z"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-mail">
<title>mail</title>
<g>
<rect x="1" y="13" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="37"/>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="1,13 32,33 63,13 "/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-map-pin">
<title>map-pin</title>
<g>
<circle fill="none" stroke-width="2" stroke-miterlimit="10" cx="32" cy="22" r="6"/>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M53,22.735C52.948,10.73,43.599,1,32,1
s-21,9.73-21,21.735C11,38.271,31.965,63,31.965,63S53.069,38.271,53,22.735z"/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-mixer">
<title>mixer</title>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="12" y1="19" x2="12" y2="64"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="52" y1="0" x2="52" y2="45"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="32" y1="38" x2="32" y2="64"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="32" y1="0" x2="32" y2="26"/>
<circle fill="none" stroke-width="2" stroke-miterlimit="10" cx="12" cy="13" r="6"/>
<circle fill="none" stroke-width="2" stroke-miterlimit="10" cx="52" cy="51" r="6"/>
<circle fill="none" stroke-width="2" stroke-miterlimit="10" cx="32" cy="32" r="6"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="12" y1="0" x2="12" y2="7"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="52" y1="57" x2="52" y2="64"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-mouse">
<title>mouse</title>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M48,17c0-8.836-7.164-16-16-16S16,8.164,16,17v30
c0,8.836,7.164,16,16,16s16-7.164,16-16V17z"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="32" y1="1" x2="32" y2="21"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="16" y1="21" x2="48" y2="21"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-nav">
<title>nav</title>
<line fill="none" stroke-width="3" stroke-miterlimit="10" x1="0" y1="40" x2="64" y2="40"/>
<line fill="none" stroke-width="3" stroke-miterlimit="10" x1="0" y1="32" x2="64" y2="32"/>
<line fill="none" stroke-width="3" stroke-miterlimit="10" x1="0" y1="24" x2="64" y2="24"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-paintbucket">
<title>paintbucket</title>
<polygon fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" points="3,38 28,63 54,37
61,36 33,8 "/>
<path fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" d="M32,27V6
c0-2.762-2.238-5-5-5s-5,2.238-5,5v13"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-pencil-ruler">
<title>pencil-ruler</title>
<polygon fill="none" stroke-width="2" stroke-miterlimit="10" points="1,63 1,2 62,63 "/>
<polygon fill="none" stroke-width="2" stroke-miterlimit="10" points="14,54 14,30 38,54 "/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="8" y1="22" x2="2" y2="22"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="6" y1="30" x2="2" y2="30"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="8" y1="38" x2="2" y2="38"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="6" y1="46" x2="2" y2="46"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="8" y1="54" x2="2" y2="54"/>
<polygon fill="none" stroke-width="2" stroke-miterlimit="10" points="25,1 19,7 55,43 63,45 61,37 "/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="25" y1="13" x2="31" y2="7"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-phone">
<title>phone</title>
<g>
<rect x="16" y="1" fill="none" stroke-width="2" stroke-miterlimit="10" width="32" height="62"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="28" y1="5" x2="36" y2="5"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="16" y1="51" x2="48" y2="51"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="16" y1="9" x2="48" y2="9"/>
<circle fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" cx="32" cy="57" r="2"/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-picture">
<title>picture</title>
<g>
<rect x="1" y="11" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="42"/>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="1,47 24,27 36,39 42,31 63,49 "/>
<circle fill="none" stroke-width="2" stroke-miterlimit="10" cx="51" cy="22" r="5"/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-play">
<title>play</title>
<rect x="1" y="1" fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" width="62" height="62"/>
<g>
<polygon fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" points="26,21 42,32
26,43 "/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-video">
<title>video</title>
<g>
<polygon fill="none" stroke-width="2" stroke-miterlimit="10" points="46,30 63,20 63,52 46,42 46,52 1,52 1,20
46,20 "/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="6" y1="28" x2="10" y2="28"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="14" y1="28" x2="18" y2="28"/>
<rect x="7" y="36" fill="none" stroke-width="2" stroke-miterlimit="10" width="18" height="10"/>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="6,12 32,12 40,20 "/>
</g>
</symbol>
</svg>
<!-- HEADER -->
<div class="preloader">
<!--
<svg>
<use xlink:href="#shape-logo"></use>
</svg>
-->
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/23878-200.png" >
</div>
<header class="site-header">
<a href="#/" class="site-logo" style="width:189; height:162;">
<!--
<svg>
<use xlink:href="#shape-logo"></use>
</svg>
-->
<img src="images/logos/logo-full2.png">
</a>
<nav class="nav-menu" role="navigation">
<ul>
<li class="active"><a href="#/">Home</a></li>
<li ><a href="#/about">About</a></li>
<li ><a href="#/blog">Blog</a></li>
<li ><a href="#/contact">Contact</a></li>
</ul>
</nav>
<button class="nav-toggle">
<svg>
<use xlink:href="#shape-nav"></use>
</svg>
</button>
<ul class="nav-social">
<li><a href="https://www.facebook.com/rtgiv"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://twitter.com/robtg4"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://www.linkedin.com/in/robert-greenfield-32ab5056?trk=nav_responsive_tab_profile"><i class="fa fa-linkedin"></i></a></li>
<li><a href="https://www.instagram.com/robtg4/"><i class="fa fa-instagram"></i></a></li>
</ul>
</header>
<!-- BODY AND DYNAMIC VIEWS -->
<div ng-view></div>
<!-- END BODY DYNAMIC VIEW -->
<!-- Footer -->
<footer class="site-footer">
<div class="footer-content">
<ul class="contact-info">
<li>
<svg class="mail">
<use xlink:href="#shape-mail"></use>
</svg>
<a href="mailto:rogreen@umich.edu">rogreen@umich.edu</a>
</li>
</ul>
</div>
<div class="copyright">Copyright © Made with Love & Caffeine by Gfxbucket. All Rights Reserved.</div>
</footer>
</div>
<!-- Scripts -->
<!-- OTHER SCRIPT -->
<script type="text/js">
jQuery(document).ready(function($) {
$('#rev-slider-1').show().revolution({
delay: 9000,
startwidth: 1170,
startheight: 500,
hideThumbs: 200,
fullScreen: "on",
fullWidth: "off",
touchenabled: "on",
onHoverStop: "on",
autoHeight:"off",
forceFullWidth:"off",
navigationType: "none",
hideTimerBar:"on",
});
$('#instagram').instagram({
userId: '269801886',
accessToken: '1554589859.71ed503.20f8b92a2d31453a97db5384e33ce3f9',
clientId: '71ed5031106a4b3a9f9ff533898d4133',
count: '999',
updateInterval: 960*60*2,
image_size: 'standard_resolution'
});
});
</script>
<script src="js/libraries/jquery.min.js"></script>
<script src="js/libraries/isotope.min.js"></script>
<script src="js/libraries/imagesloaded.min.js"></script>
<script src="js/libraries/jquery.parallax.min.js"></script>
<script src="js/libraries/jquery.mb.YTPlayer.js"></script>
<script src="js/libraries/slick.min.js"></script>
<script src="js/libraries/smoothScroll.min.js"></script>
<script src="js/libraries/jquery.validate.min.js"></script>
<script src="js/theme.js"></script>
<script src="js/libraries/jquery.themepunch.tools.min.js"></script>
<script src="js/libraries/jquery.themepunch.revolution.min.js"></script>
<script src="js/libraries/instagram.min.js"></script>
<!-- END OTHER SCRIPT-->
</body>
</html>
替换为 main.html 视图的代码时，站点被格式化（当然，由于 ng-view 不再存在，这使得无法显示其他路由，但它表明问题是由ng-view itself/angular，因为我也直接将所有 css 和 js 文件链接到 main.html 视图。
这是 main.html - 我试图通过 ng-view 在砌体中展示的内容。
<!-- Portfolio -->
<section id="portfolio" class="element" >
<div class="portfolio portfolio-masonry portfolio-style-2">
<article class="portfolio-item web-design app-development">
<a href="#/bbum">
<img src="images/portfolio/portfolio-4.jpg" alt="Portfolio item 4">
<div class="hover">
<div class="hover-content">
<h5>#BBUM Movement</h5>
<span>Hashtag Activism & Social Media</span>
</div>
</div>
</a>
</article>
<article class="portfolio-item portfolio-large branding web-design">
<a href="#/nomsy">
<img src="images/portfolio/portfolio-5.jpg" alt="Portfolio item 5">
<div class="hover">
<div class="hover-content">
<h5>Nomsy</h5>
<span>Food Content Discovery Tailored to Your Diet</span>
</div>
</div>
</a>
</article>
<article class="portfolio-item app-development photography">
<a href="#/swyft">
<img src="images/portfolio/portfolio-6.jpg" alt="Portfolio item 6">
<div class="hover">
<div class="hover-content">
<h5>Swyft</h5>
<span>Safe, Nightly University Transportation</span>
</div>
</div>
</a>
</article>
<article class="portfolio-item branding photography">
<a href="#/bitcoin">
<img src="images/portfolio/portfolio-7.jpg" alt="Portfolio item 7">
<div class="hover">
<div class="hover-content">
<h5>Bitcoin Trading</h5>
<span>Trading Against the Blockchain</span>
</div>
</div>
</a>
</article>
<article class="portfolio-item web-design app-development">
<a href="#/blacklist">
<img src="images/portfolio/portfolio-9.jpg" alt="Portfolio item 9">
<div class="hover">
<div class="hover-content">
<h5>Blaclist</h5>
<span>Redefining Mobile, Black Media</span>
</div>
</div>
</a>
</article>
<article class="portfolio-item web-design app-development">
<a href="#/portfolio-post">
<img src="images/portfolio/portfolio-11.jpg" alt="Portfolio item 11">
<div class="hover">
<div class="hover-content">
<h5>Learning More</h5>
<span>Yearning for Mentorship</span>
</div>
</div>
</a>
</article>
</div>
</section>
<script src="js/libraries/jquery.min.js"></script>
<script src="js/libraries/isotope.min.js"></script>
<script src="js/libraries/imagesloaded.min.js"></script>
<script src="js/libraries/jquery.parallax.min.js"></script>
<script src="js/libraries/jquery.mb.YTPlayer.js"></script>
<script src="js/libraries/slick.min.js"></script>
<script src="js/libraries/smoothScroll.min.js"></script>
<script src="js/libraries/jquery.validate.min.js"></script>
<script src="js/theme.js"></script>
<script src="js/libraries/jquery.themepunch.tools.min.js"></script>
<script src="js/libraries/jquery.themepunch.revolution.min.js"></script>
<script src="js/libraries/instagram.min.js"></script>
关于如何让 ng-view 正确处理 main.html 视图有什么想法吗？所有其他视图再次完美显示。
如果通过 masonry 格式化意味着您正在尝试使用该库，那么您似乎缺少对 masonry js 文件的引用。
将此添加到您的 html 页面中的某处以及您的其他脚本标记：
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
为确保模板标记的砌体初始化，您可以将其内容包装到指令中并使用 compile 函数触发布局：
const MasonryMain = () => ({
template: 'main.html',
compile(e) {
$(e).masonry({/*options*/});
}
})
由于一个小的格式问题，我的头撞到了键盘。
我正在使用 ng-view，它似乎显示了索引视图（使用“#/”路径的主视图），但没有正确的砌体 CSS 格式，但它确实显示了其他视图（它们是不是砌体格式）正确。这是代码：
使用 Ng-view 时未格式化：
<!DOCTYPE html>
<html lang="en" ng-app="mainApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="description" content="This is an example of a meta description. This will often show up in search results.">
<title>ROBTG4</title>
<link rel="shortcut icon" href="img/favicon.png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- /Mobile Icon (Home Screen Icon) -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300,400,700,900&subset=latin,latin-ext">
<link rel="stylesheet" href="css/slick.css"/>
<link rel="stylesheet" href="css/revolution-slider.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/min/font-awesome.min.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/widgets.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- /Include CSS Files -->
<!-- SCRIPT -->
<!-- Angular JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="js/app.js"></script>
<!-- END SCRIPT -->
</head>
<body class="nav-side" ng-controller="mainController">
<div class="site" >
<!-- SVGs -->
<svg style="display: none;">
<symbol viewBox="0 0 96 96" id="shape-arrow-left-light">
<title>arrow-left-light</title>
<path d="M84,44H21.656l21.456-21.456c1.562-1.562,1.562-4.095,0.001-5.657c-1.562-1.562-4.096-1.562-5.658,0L9.172,45.171l0,0 c-0.186,0.186-0.352,0.391-0.498,0.61c-0.067,0.101-0.114,0.21-0.171,0.315c-0.067,0.124-0.142,0.242-0.196,0.373 c-0.056,0.135-0.088,0.276-0.129,0.416c-0.032,0.111-0.075,0.217-0.098,0.331C8.028,47.475,8,47.737,8,48l0,0 c0,0.003,0.001,0.005,0.001,0.008c0,0.259,0.027,0.519,0.078,0.774c0.024,0.121,0.069,0.232,0.104,0.349 c0.039,0.133,0.07,0.268,0.123,0.397c0.058,0.139,0.136,0.265,0.208,0.396c0.054,0.098,0.096,0.198,0.159,0.292 c0.147,0.221,0.314,0.427,0.501,0.614l28.282,28.281c1.562,1.562,4.095,1.562,5.657,0.001c1.562-1.562,1.562-4.096,0-5.658 L21.657,52H84c2.209,0,4-1.791,4-4S86.209,44,84,44z"/>
</symbol>
<symbol viewBox="0 0 96 96" id="shape-arrow-left">
<title>arrow-left</title>
<path d="M84,44H21.656l21.456-21.456c1.562-1.562,1.562-4.095,0.001-5.657c-1.562-1.562-4.096-1.562-5.658,0L9.172,45.171l0,0 c-0.186,0.186-0.352,0.391-0.498,0.61c-0.067,0.101-0.114,0.21-0.171,0.315c-0.067,0.124-0.142,0.242-0.196,0.373 c-0.056,0.135-0.088,0.276-0.129,0.416c-0.032,0.111-0.075,0.217-0.098,0.331C8.028,47.475,8,47.737,8,48l0,0 c0,0.003,0.001,0.005,0.001,0.008c0,0.259,0.027,0.519,0.078,0.774c0.024,0.121,0.069,0.232,0.104,0.349 c0.039,0.133,0.07,0.268,0.123,0.397c0.058,0.139,0.136,0.265,0.208,0.396c0.054,0.098,0.096,0.198,0.159,0.292 c0.147,0.221,0.314,0.427,0.501,0.614l28.282,28.281c1.562,1.562,4.095,1.562,5.657,0.001c1.562-1.562,1.562-4.096,0-5.658 L21.657,52H84c2.209,0,4-1.791,4-4S86.209,44,84,44z"/>
</symbol>
<symbol viewBox="0 0 96 96" id="shape-arrow-right-light">
<title>arrow-right-light</title>
<path d="M12,52h62.344L52.888,73.456c-1.562,1.562-1.562,4.095-0.001,5.656c1.562,1.562,4.096,1.562,5.658,0l28.283-28.284l0,0 c0.186-0.186,0.352-0.391,0.498-0.609c0.067-0.101,0.114-0.21,0.172-0.315c0.066-0.124,0.142-0.242,0.195-0.373 c0.057-0.135,0.089-0.275,0.129-0.415c0.033-0.111,0.076-0.217,0.099-0.331C87.973,48.525,88,48.263,88,48l0,0 c0-0.003-0.001-0.006-0.001-0.009c-0.001-0.259-0.027-0.519-0.078-0.774c-0.024-0.12-0.069-0.231-0.104-0.349 c-0.039-0.133-0.069-0.268-0.123-0.397c-0.058-0.139-0.136-0.265-0.208-0.396c-0.054-0.098-0.097-0.198-0.159-0.292 c-0.146-0.221-0.314-0.427-0.501-0.614L58.544,16.888c-1.562-1.562-4.095-1.562-5.657-0.001c-1.562,1.562-1.562,4.095,0,5.658 L74.343,44L12,44c-2.209,0-4,1.791-4,4C8,50.209,9.791,52,12,52z"/>
</symbol>
<symbol viewBox="0 0 96 96" id="shape-arrow-right">
<title>arrow-right</title>
<path d="M12,52h62.344L52.888,73.456c-1.562,1.562-1.562,4.095-0.001,5.656c1.562,1.562,4.096,1.562,5.658,0l28.283-28.284l0,0 c0.186-0.186,0.352-0.391,0.498-0.609c0.067-0.101,0.114-0.21,0.172-0.315c0.066-0.124,0.142-0.242,0.195-0.373 c0.057-0.135,0.089-0.275,0.129-0.415c0.033-0.111,0.076-0.217,0.099-0.331C87.973,48.525,88,48.263,88,48l0,0 c0-0.003-0.001-0.006-0.001-0.009c-0.001-0.259-0.027-0.519-0.078-0.774c-0.024-0.12-0.069-0.231-0.104-0.349 c-0.039-0.133-0.069-0.268-0.123-0.397c-0.058-0.139-0.136-0.265-0.208-0.396c-0.054-0.098-0.097-0.198-0.159-0.292 c-0.146-0.221-0.314-0.427-0.501-0.614L58.544,16.888c-1.562-1.562-4.095-1.562-5.657-0.001c-1.562,1.562-1.562,4.095,0,5.658 L74.343,44L12,44c-2.209,0-4,1.791-4,4C8,50.209,9.791,52,12,52z"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-arrow-thin-left">
<title>arrow-thin-left</title>
<g>
<polyline fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" points="37,15 20,32
37,49 "/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-arrow-thin-right">
<title>arrow-thin-right</title>
<g>
<polyline fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" points="27,15 44,32
27,49 "/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-browser-search">
<title>browser-search</title>
<rect x="1" y="7" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="50"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="1" y1="15" x2="63" y2="15"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="10" y1="11" x2="6" y2="11"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="18" y1="11" x2="14" y2="11"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="26" y1="11" x2="22" y2="11"/>
<g>
<circle fill="none" stroke-width="2" stroke-miterlimit="10" cx="29" cy="33" r="6"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="33" y1="37" x2="41" y2="45"/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-cup">
<title>cup</title>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M16,27c0,4.418,6.059,8,16,8s16-3.582,16-8V1H16V27z
"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="20" y1="63" x2="44" y2="63"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="32" y1="35" x2="32" y2="63"/>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M16,7H7c0,0,0,9,9,9"/>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M48,7h9c0,0,0,9-9,9"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-heart">
<title>heart</title>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M1,21c0,20,31,38,31,38s31-18,31-38
c0-8.285-6-16-15-16c-8.285,0-16,5.715-16,14c0-8.285-7.715-14-16-14C7,5,1,12.715,1,21z"/>
</symbol>
<symbol viewBox="0 0 28 15" id="shape-indicator">
<title>indicator</title>
<path class="st0" fill="#e8e8e8" d="M13.5,0L15,1.4L1.4,15L0,13.5L13.5,0z"/>
<path class="st0" fill="#e8e8e8" d="M28,13.5L26.5,15L13,1.4L14.4,0L28,13.5z"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-laptop">
<title>laptop</title>
<g>
<rect x="8" y="12" fill="none" stroke-width="2" stroke-miterlimit="10" width="48" height="34"/>
<rect x="1" y="46" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="6"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="34" y1="16" x2="30" y2="16"/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-layers">
<title>layers</title>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="18,26.066 2,33 32,45 62,33 46,26.067 "/>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="18,39.066 2,46 32,58 62,46 46,39.067 "/>
<polygon fill="none" stroke-width="2" stroke-miterlimit="10" points="32,32 62,20 32,7 2,20 "/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-layout-4boxes">
<title>layout-4boxes</title>
<rect x="1" y="1" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="14"/>
<rect x="1" y="39" fill="none" stroke-width="2" stroke-miterlimit="10" width="31" height="24"/>
<rect x="32" y="39" fill="none" stroke-width="2" stroke-miterlimit="10" width="31" height="24"/>
<rect x="1" y="15" fill="none" stroke-width="2" stroke-miterlimit="10" width="31" height="24"/>
<rect x="32" y="15" fill="none" stroke-width="2" stroke-miterlimit="10" width="31" height="24"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-layout-sideleft">
<title>layout-sideleft</title>
<rect x="1" y="1" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="14"/>
<rect x="1" y="15" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="48"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="22" y1="15" x2="22" y2="63"/>
</symbol>
<symbol viewBox="0 0 289.3 286.2" id="shape-logo">
<title>logo</title>
<style type="text/css">
<![CDATA[ .st0{fill-rule:evenodd;clip-rule:evenodd;} ]]>
</style>
<path class="st0" d="M267.1,143.3L267.1,143.3L267.1,143.3z M199.6,63.3c-14.3-9.2-30.7-15.2-47.7-16.2c-34.3-0.1-68.7-0.1-103,0
c-0.3,57.1-0.1,114.1-0.1,171.2c-0.1,9,0.2,18.1-0.2,27.2l-23.4-22.8c0-0.3,0-0.6-0.1-0.9c-0.3-5.3-0.1-10.6-0.1-15.9
C25,145,24.7,84.1,25,23.3h122.1c1.1,0,2.2,0,3.3,0c0.1,0,0.1,0,0.2,0c0,0,0,0,0.1,0c64.4,1.9,116.5,55.1,116.5,120
c0,51.7-33.1,96-79.2,112.8c-0.2,0.1-0.4,0.2-0.6,0.2c-0.9,0.3-1.8,0.6-2.7,0.9c0,0,0,0,0,0c-3,1-6,1.8-9,2.5c-4,1-8.1,1.8-12.2,2.4
c0,0,0,0,0,0c-2.3,0.4-4.7,0.7-7,1c-1.7,0-3.4,0-5.1,0c-1.4,0-2.7,0.1-4.1,0.1h-8.7c-6,0-12,0-17.9,0c-8.9,0-17.9,0-26.8,0
c-7,0-13.9,0-20.9-0.1v-0.7v-0.7v-0.7v-0.7v-0.7v-189h73.5c40.4,0,73.4,33.1,73.4,73.4c0,30-18.2,55.9-44.1,67.3
c-9,4-19,6.2-29.4,6.2h-25.7v-24.3V94.9l-23.9,0l0,122.7l0,21.8c8,0.1,15.9,0.1,23.9,0.1c11.6,0,23.2,0,34.8-0.1
c7-0.6,13.8-2,20.4-4.2c21.5-7.1,40.3-22,52.3-41.3c7.7-12.9,13.1-27.6,13.6-42.7c0.8-4.9,1-10,0.2-15
C240,107.2,223.5,79.8,199.6,63.3L199.6,63.3z M25,255l8.4,8.3l23.3,22.9h63.7h25.7c10.1,0,19.9-1.1,29.4-3.1
c64.7-13.7,113.7-71.4,113.7-140.1C289.3,64.4,224.9,0,146.2,0H0c0.1,76.6,0,153.2,0,229.8c0,0.2,0,0.4,0,0.6L25,255z"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-mail-heart">
<title>mail-heart</title>
<g>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="1,26 32,45.434 63,26 "/>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="11.334,21.667 1,26 1,63 63,63 63,26
63,26 52.666,21.667 "/>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="11,32 11,1 53,1 53,32 "/>
</g>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M22,19c0,6.666,10,12,10,12s10-5.334,10-12
c0-2.762-2-5-5-5c-2.762,0-5,2.238-5,5c0-2.762-2.238-5-5-5C24,14,22,16.238,22,19z"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-mail">
<title>mail</title>
<g>
<rect x="1" y="13" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="37"/>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="1,13 32,33 63,13 "/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-map-pin">
<title>map-pin</title>
<g>
<circle fill="none" stroke-width="2" stroke-miterlimit="10" cx="32" cy="22" r="6"/>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M53,22.735C52.948,10.73,43.599,1,32,1
s-21,9.73-21,21.735C11,38.271,31.965,63,31.965,63S53.069,38.271,53,22.735z"/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-mixer">
<title>mixer</title>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="12" y1="19" x2="12" y2="64"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="52" y1="0" x2="52" y2="45"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="32" y1="38" x2="32" y2="64"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="32" y1="0" x2="32" y2="26"/>
<circle fill="none" stroke-width="2" stroke-miterlimit="10" cx="12" cy="13" r="6"/>
<circle fill="none" stroke-width="2" stroke-miterlimit="10" cx="52" cy="51" r="6"/>
<circle fill="none" stroke-width="2" stroke-miterlimit="10" cx="32" cy="32" r="6"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="12" y1="0" x2="12" y2="7"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="52" y1="57" x2="52" y2="64"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-mouse">
<title>mouse</title>
<path fill="none" stroke-width="2" stroke-miterlimit="10" d="M48,17c0-8.836-7.164-16-16-16S16,8.164,16,17v30
c0,8.836,7.164,16,16,16s16-7.164,16-16V17z"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="32" y1="1" x2="32" y2="21"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="16" y1="21" x2="48" y2="21"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-nav">
<title>nav</title>
<line fill="none" stroke-width="3" stroke-miterlimit="10" x1="0" y1="40" x2="64" y2="40"/>
<line fill="none" stroke-width="3" stroke-miterlimit="10" x1="0" y1="32" x2="64" y2="32"/>
<line fill="none" stroke-width="3" stroke-miterlimit="10" x1="0" y1="24" x2="64" y2="24"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-paintbucket">
<title>paintbucket</title>
<polygon fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" points="3,38 28,63 54,37
61,36 33,8 "/>
<path fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" d="M32,27V6
c0-2.762-2.238-5-5-5s-5,2.238-5,5v13"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-pencil-ruler">
<title>pencil-ruler</title>
<polygon fill="none" stroke-width="2" stroke-miterlimit="10" points="1,63 1,2 62,63 "/>
<polygon fill="none" stroke-width="2" stroke-miterlimit="10" points="14,54 14,30 38,54 "/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="8" y1="22" x2="2" y2="22"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="6" y1="30" x2="2" y2="30"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="8" y1="38" x2="2" y2="38"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="6" y1="46" x2="2" y2="46"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="8" y1="54" x2="2" y2="54"/>
<polygon fill="none" stroke-width="2" stroke-miterlimit="10" points="25,1 19,7 55,43 63,45 61,37 "/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="25" y1="13" x2="31" y2="7"/>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-phone">
<title>phone</title>
<g>
<rect x="16" y="1" fill="none" stroke-width="2" stroke-miterlimit="10" width="32" height="62"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="28" y1="5" x2="36" y2="5"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="16" y1="51" x2="48" y2="51"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="16" y1="9" x2="48" y2="9"/>
<circle fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" cx="32" cy="57" r="2"/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-picture">
<title>picture</title>
<g>
<rect x="1" y="11" fill="none" stroke-width="2" stroke-miterlimit="10" width="62" height="42"/>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="1,47 24,27 36,39 42,31 63,49 "/>
<circle fill="none" stroke-width="2" stroke-miterlimit="10" cx="51" cy="22" r="5"/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-play">
<title>play</title>
<rect x="1" y="1" fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" width="62" height="62"/>
<g>
<polygon fill="none" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" points="26,21 42,32
26,43 "/>
</g>
</symbol>
<symbol viewBox="0 0 64 64" id="shape-video">
<title>video</title>
<g>
<polygon fill="none" stroke-width="2" stroke-miterlimit="10" points="46,30 63,20 63,52 46,42 46,52 1,52 1,20
46,20 "/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="6" y1="28" x2="10" y2="28"/>
<line fill="none" stroke-width="2" stroke-miterlimit="10" x1="14" y1="28" x2="18" y2="28"/>
<rect x="7" y="36" fill="none" stroke-width="2" stroke-miterlimit="10" width="18" height="10"/>
<polyline fill="none" stroke-width="2" stroke-miterlimit="10" points="6,12 32,12 40,20 "/>
</g>
</symbol>
</svg>
<!-- HEADER -->
<div class="preloader">
<!--
<svg>
<use xlink:href="#shape-logo"></use>
</svg>
-->
<img src="https://d30y9cdsu7xlg0.cloudfront.net/png/23878-200.png" >
</div>
<header class="site-header">
<a href="#/" class="site-logo" style="width:189; height:162;">
<!--
<svg>
<use xlink:href="#shape-logo"></use>
</svg>
-->
<img src="images/logos/logo-full2.png">
</a>
<nav class="nav-menu" role="navigation">
<ul>
<li class="active"><a href="#/">Home</a></li>
<li ><a href="#/about">About</a></li>
<li ><a href="#/blog">Blog</a></li>
<li ><a href="#/contact">Contact</a></li>
</ul>
</nav>
<button class="nav-toggle">
<svg>
<use xlink:href="#shape-nav"></use>
</svg>
</button>
<ul class="nav-social">
<li><a href="https://www.facebook.com/rtgiv"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://twitter.com/robtg4"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://www.linkedin.com/in/robert-greenfield-32ab5056?trk=nav_responsive_tab_profile"><i class="fa fa-linkedin"></i></a></li>
<li><a href="https://www.instagram.com/robtg4/"><i class="fa fa-instagram"></i></a></li>
</ul>
</header>
<!-- BODY AND DYNAMIC VIEWS -->
<div ng-view></div>
<!-- END BODY DYNAMIC VIEW -->
<!-- Footer -->
<footer class="site-footer">
<div class="footer-content">
<ul class="contact-info">
<li>
<svg class="mail">
<use xlink:href="#shape-mail"></use>
</svg>
<a href="mailto:rogreen@umich.edu">rogreen@umich.edu</a>
</li>
</ul>
</div>
<div class="copyright">Copyright © Made with Love & Caffeine by Gfxbucket. All Rights Reserved.</div>
</footer>
</div>
<!-- Scripts -->
<!-- OTHER SCRIPT -->
<script type="text/js">
jQuery(document).ready(function($) {
$('#rev-slider-1').show().revolution({
delay: 9000,
startwidth: 1170,
startheight: 500,
hideThumbs: 200,
fullScreen: "on",
fullWidth: "off",
touchenabled: "on",
onHoverStop: "on",
autoHeight:"off",
forceFullWidth:"off",
navigationType: "none",
hideTimerBar:"on",
});
$('#instagram').instagram({
userId: '269801886',
accessToken: '1554589859.71ed503.20f8b92a2d31453a97db5384e33ce3f9',
clientId: '71ed5031106a4b3a9f9ff533898d4133',
count: '999',
updateInterval: 960*60*2,
image_size: 'standard_resolution'
});
});
</script>
<script src="js/libraries/jquery.min.js"></script>
<script src="js/libraries/isotope.min.js"></script>
<script src="js/libraries/imagesloaded.min.js"></script>
<script src="js/libraries/jquery.parallax.min.js"></script>
<script src="js/libraries/jquery.mb.YTPlayer.js"></script>
<script src="js/libraries/slick.min.js"></script>
<script src="js/libraries/smoothScroll.min.js"></script>
<script src="js/libraries/jquery.validate.min.js"></script>
<script src="js/theme.js"></script>
<script src="js/libraries/jquery.themepunch.tools.min.js"></script>
<script src="js/libraries/jquery.themepunch.revolution.min.js"></script>
<script src="js/libraries/instagram.min.js"></script>
<!-- END OTHER SCRIPT-->
</body>
</html>
替换为 main.html 视图的代码时，站点被格式化（当然，由于 ng-view 不再存在，这使得无法显示其他路由，但它表明问题是由ng-view itself/angular，因为我也直接将所有 css 和 js 文件链接到 main.html 视图。
这是 main.html - 我试图通过 ng-view 在砌体中展示的内容。
<!-- Portfolio -->
<section id="portfolio" class="element" >
<div class="portfolio portfolio-masonry portfolio-style-2">
<article class="portfolio-item web-design app-development">
<a href="#/bbum">
<img src="images/portfolio/portfolio-4.jpg" alt="Portfolio item 4">
<div class="hover">
<div class="hover-content">
<h5>#BBUM Movement</h5>
<span>Hashtag Activism & Social Media</span>
</div>
</div>
</a>
</article>
<article class="portfolio-item portfolio-large branding web-design">
<a href="#/nomsy">
<img src="images/portfolio/portfolio-5.jpg" alt="Portfolio item 5">
<div class="hover">
<div class="hover-content">
<h5>Nomsy</h5>
<span>Food Content Discovery Tailored to Your Diet</span>
</div>
</div>
</a>
</article>
<article class="portfolio-item app-development photography">
<a href="#/swyft">
<img src="images/portfolio/portfolio-6.jpg" alt="Portfolio item 6">
<div class="hover">
<div class="hover-content">
<h5>Swyft</h5>
<span>Safe, Nightly University Transportation</span>
</div>
</div>
</a>
</article>
<article class="portfolio-item branding photography">
<a href="#/bitcoin">
<img src="images/portfolio/portfolio-7.jpg" alt="Portfolio item 7">
<div class="hover">
<div class="hover-content">
<h5>Bitcoin Trading</h5>
<span>Trading Against the Blockchain</span>
</div>
</div>
</a>
</article>
<article class="portfolio-item web-design app-development">
<a href="#/blacklist">
<img src="images/portfolio/portfolio-9.jpg" alt="Portfolio item 9">
<div class="hover">
<div class="hover-content">
<h5>Blaclist</h5>
<span>Redefining Mobile, Black Media</span>
</div>
</div>
</a>
</article>
<article class="portfolio-item web-design app-development">
<a href="#/portfolio-post">
<img src="images/portfolio/portfolio-11.jpg" alt="Portfolio item 11">
<div class="hover">
<div class="hover-content">
<h5>Learning More</h5>
<span>Yearning for Mentorship</span>
</div>
</div>
</a>
</article>
</div>
</section>
<script src="js/libraries/jquery.min.js"></script>
<script src="js/libraries/isotope.min.js"></script>
<script src="js/libraries/imagesloaded.min.js"></script>
<script src="js/libraries/jquery.parallax.min.js"></script>
<script src="js/libraries/jquery.mb.YTPlayer.js"></script>
<script src="js/libraries/slick.min.js"></script>
<script src="js/libraries/smoothScroll.min.js"></script>
<script src="js/libraries/jquery.validate.min.js"></script>
<script src="js/theme.js"></script>
<script src="js/libraries/jquery.themepunch.tools.min.js"></script>
<script src="js/libraries/jquery.themepunch.revolution.min.js"></script>
<script src="js/libraries/instagram.min.js"></script>
关于如何让 ng-view 正确处理 main.html 视图有什么想法吗？所有其他视图再次完美显示。
如果通过 masonry 格式化意味着您正在尝试使用该库，那么您似乎缺少对 masonry js 文件的引用。
将此添加到您的 html 页面中的某处以及您的其他脚本标记：
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
为确保模板标记的砌体初始化，您可以将其内容包装到指令中并使用 compile 函数触发布局：
const MasonryMain = () => ({
template: 'main.html',
compile(e) {
$(e).masonry({/*options*/});
}
})