1

While creating a dynamic panel:

<div ng-controller="widgetCtrl">
  <div drag-group="widgets">
    <div class="panel panel-primary" ng-repeat="widget in widgets" draggable-widget="widget" draggable-widget-callback="moveWidget">
      <div class="panel-heading" ng-include="widget.header" draggable-widget-handle></div>
      <div ng-include="widget.body"></div>
      <div class="panel-footer" ng-include="widget.footer"></div>
    </div>
  </div>
</div>

From data in an array:

var widgets = [{
        title: 'Sites',
        header: 'panel-header-sites.html',
        body: 'include-sites.html',
        footer: 'panel-parent-footer.html'
    }, ...]

The bindings within the ng-include (include-sites.html):

<div class="panel-body" ng-controller="SiteCtrl as ctrlsite">
  <table class="table-condensed table-fixed table-hover">
    <thead>
      <tr>
        <th class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">name</th>
        <th class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">connection</th>
        <th class="col-lg-3 col-md-3 col-sm-3 col-xs-3 ">location</th>
        <th class="col-lg-2 col-md-2 col-sm-2 col-xs-2 ">contact</th>
        <th class="col-lg-1 col-md-1 col-sm-1 col-xs-1"><a ng-click="ctrlsite.expandAll(allExpanded = !allExpanded)" data-toggle="tooltip" data-placement="top" title="All Details"><i class="zmdi zmdi-more zmdi-hc-2x"></i></a></th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat-start="site in ctrlsite.sites">
        <td class="col-lg-3 col-md-3 col-sm-3 col-xs-3 h-dotted-line">{{site.SiteName}}<br/>
          <span class="tr-secondary-row text-capitalize" ng-repeat="connection in site.Connections">{{connection.ExternalIP}}</span></td> ... </div>

Controller:

var app = angular.module('myApp', ['ngMessages', 'ngResource', 'angular.filter', 'dndLists'])

  .factory('Sites', function ($resource) {
    return $resource('data/sites.json');
  });

app.controller('SiteCtrl', function ($scope, Sites) {
    var self = this;

    console.log("SiteCtrl hit");
    console.log($scope.$id);
    self.sites = Sites.query();

    self.expandAll = function (expanded) {
      // $scope is required here, hence the injection above, even though we're using "controller as" syntax
      $scope.$broadcast('onExpandAll', {
        expanded: expanded
      });
    };

  });

Fail because I get the following error:

http://errors.angularjs.org/1.5.9/ng/areq?p0=SiteCtrl&p1=not%20aNaNunction%2C%20got%20undefined

When all code resides in a single file (index.html) everything works great. I have been hunting for weeks trying to resolve this, but I am very new to AngularJS.

6
  • It's hard to tell without seeing more of your code / html, but that error from Angular is saying that the SiteCtrl controller doesn't resolve to a function - meaning it never got bootstrapped. It may be an order of inclusion issue, or that you're not wrapping the app.controller in a function closure ala (function() { /*code here*/ })(); Commented Jun 2, 2017 at 14:10
  • The HTML all works, it seems the ng-controller and binding don't work as soon as they are moved to an include (ng-include). Commented Jun 2, 2017 at 15:51
  • Generally ng-include should afaik be avoided. Can you make it into a separate component? Commented Jun 2, 2017 at 16:05
  • I don't follow your comment, can you please clarify and provide example? Commented Jun 2, 2017 at 16:33
  • All I can think at this point, without seeing the structure of what you're doing, is that maybe your Angular code isn't in a separate included .js file? ng-include creates a new Root Scope (that doesn't inherit) so if your app/controller code is in an HTML script tag on your page, the include might not be able to resolve the controller. Either way, the error you're getting is Angular telling you that it cannot resolve the Controller for whatever reason so it's almost certainly an inclusion / order of inclusion issue. HTH! Commented Jun 2, 2017 at 18:39

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.