Question

我因为一个小的格式化问题而撞了我的键盘。

我正在使用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&amp;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本身引起的/ 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 &amp; 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视图的任何想法？所有其他观点再次完美呈现。

Answer 1

如果通过masonry格式化表示您正在尝试使用该库，那么您似乎缺少对masonry js文件的引用。

在html页面的某处添加此内容以及其他脚本标记：

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

Answer 2

要确保模板标记的砌体初始化，您可以将其内容包装到指令中并使用$nav->title函数触发布局：

compile

ng-view不遵循1 View的CSS

2 个答案: