HTML5 Импорт и Угловое контроллер связывания

Question

Учитывая

Я использую веб-компоненты HTML5 через <link rel="import..." конструкции. Am способен разбить большую разметку HTML на более мелкие части и импортировать их по желанию в контейнер (веб-страницу), который объединяет все более мелкие части. Прохладный до сих пор.

Теперь я хочу использовать привязку по угловым данным, чтобы иметь возможность показывать динамический контент на этих небольших страницах. На моей главной странице Index.html я могу объявить ng-приложение в первом теге Div без проблем. На этой странице также указан угловой модуль. Я могу заставить привязку работать, если поместить всю логику контроллера в основную страницу.

Проблема

Я хотел бы сделать, это разделить каждый скрипт контроллера, показанный ниже, которые должны содержаться в импортированной страницы, а не только в главном 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-приложение, определенное на главной странице ... Просьба сообщить.

Хорошо, если я перееду код на частичную страницу, как это, где TestResultsApp находится на главной странице (Index) называют эту страницу «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> 

Новые ошибки частичная страница, не может найти угловой ... Еще об этом завтра ...

Answer 1

Если я читаю это право, вам нужно использовать ng-controller на каждой странице, где используется контроллер, и он должен работать.