HTML5導入和角控制器綁定

我通過<link rel="import..."構建使用HTML5的Web組件。 Am 能夠將大型HTML標記分解爲更小的部分，並將它們隨意導入容器（網頁），將所有較小的部分放在一起。酷到目前爲止。

現在我想使用Angular數據綁定，以便能夠在這些較小的頁面中顯示動態內容。在我的主要Index.html頁面中，我能夠在第一個Div標籤中聲明ng-app沒有問題。 angular.module也在該頁面中聲明。如果我將所有控制器邏輯放入主頁面，我可以使綁定工作。

問題

我想要做的分割如下所示每個控制器腳本包含在導入的頁面，而不只是在它的工作現在主要的index.html。

<script> 
     angular.module('ResultsApp', []) 
      .controller('CardsController', ['$scope', 
       function ($scope) { 
        $scope.results = { 
         'Passed': '12', 
         'Failed': '3', 
         'Warnings': '5', 
         'Summary': '20' 
        } 
       } 
      ]) 
     .controller('ResultsController', ['$scope', 
      function ($scope) { 
       $scope.results = [ 
        { Name: "The Name of something to display", Passed: "True", Failed: "False", Comments: "These are the comments yes! Comments" }, 
        { Name: "The Name of something to display", Passed: "True", Failed: "False", Comments: "These are the comments yes! Comments" }, 
        { Name: "The Name of something to display", Passed: "True", Failed: "False", Comments: "These are the comments yes! Comments" }, 
        { Name: "The Name of something to display", Passed: "True", Failed: "False", Comments: "These are the comments yes! Comments" }, 
        { Name: "The Name of something to display", Passed: "True", Failed: "False", Comments: "These are the comments yes! Comments" }, 
        { Name: "The Name of something to display", Passed: "True", Failed: "False", Comments: "These are the comments yes! Comments" }, 
        { Name: "The Name of something to display", Passed: "True", Failed: "False", Comments: "These are the comments yes! Comments" }, 
        { Name: "The Name of something to display", Passed: "True", Failed: "False", Comments: "These are the comments yes! Comments" } 

       ]; 
      }]); 
    </script>

我試着將控制器邏輯放入每個導入的頁面，但它似乎不工作。我只是試圖使用主頁中定義的一個ng-app ...請指教。

好吧，如果我的代碼移動到部分頁面像這樣，在TestResultsApp是主要的頁面（索引）上稱此頁「pageheading.html」：

<div class="row" ng-controller="HeaderController"> 
    <div class="col-lg-12"> 
    <h1 class="page-header"> 
     {{header.Title}} 
    </h1> 
    <ol class="breadcrumb"> 
     <li class="active"> 
     <i class="fa fa-dashboard">Some Data Here</i> 
     </li> 
    </ol> 
    </div> 
</div> 
<script> 
    angular.module('HeaderModule', ['TestResultsApp']) 
    .controller('HeaderController', ['$scope', 
     function ($scope) { 
      $scope.header = { "Title": "Pretty Good, Test Case Results Right here!" } 
     }]) 
</script>

新的錯誤 的部分頁面，找不到角...更多關於這個明天...

來源

2016-04-18 John Peters

如果我正在閱讀這個權利，您需要在每個使用控制器的頁面上使用ng-controller，它應該可以工作。

來源

2016-04-18 21:02:22

謝謝克里斯，我試過一次，但會再次嘗試併發回結果。 –

我發佈了有問題的新結果...請指教。 –

似乎web組件在js加載之前並未將其構建爲一個頁面。嘗試在部分頁面中添加'ng-app =「ResultsApp」'以及'ng-controller'。 –

HTML5導入和角控制器綁定

回答

相關問題