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.
app.controllerin a function closure ala(function() { /*code here*/ })();ng-includecreates 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!