HTML5 Import and Angular controller binding

Question

Given

I'm using HTML5 web components via the <link rel="import..." construct. Am able to breakup large HTML markup into smaller portions and import them at will into a container (web page) that puts all the smaller parts together. Cool so far.

Now I want to use Angular data binding to be able to show dynamic content in those smaller pages. In my main Index.html page I am able to declare the ng-app in the first Div tag no problem. The angular.module is declared in that page as well. I can get the binding to work if I put all controller logic into main page.

Problem

I'd like to do is split each controller script shown below to be contained in the imported page and not just in the main index.html where it's working now.

  <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>

I've tried putting the controller logic into each imported page but it doesn't seem to work. I am only attempting to use one ng-app defined in main page... Please advise.

Ok if I move the code to a partial page like this, where TestResultsApp is on the main page (Index) call this page "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>

The New Error The partial page, can't find angular... More on this tomorrow...

Chris Stanley · Accepted Answer · 2016-04-18 21:02:22Z

1

If I am reading this right, you'll need to use ng-controller on each page that utilizes the controller, and it should work.

answered Apr 18, 2016 at 21:02

Chris Stanley

2,9663 gold badges15 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JWP Over a year ago

Thanks Chris, I tried that once but will try again and post back results.

JWP Over a year ago

I posted new results in question... Please advise.

Chris Stanley Over a year ago

Seems like the web components aren't building it as one page before the js is loading. Try adding ng-app="ResultsApp" as well as ng-controller to the partial page(s).

JWP Over a year ago

Thanks Chris; I'm going to ask question anew, with exact details of what I'm seeing.

Collectives™ on Stack Overflow

HTML5 Import and Angular controller binding

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related