创建动态面板时:
<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>
来自数组中的数据:
var widgets = [{
title: 'Sites',
header: 'panel-header-sites.html',
body: 'include-sites.html',
footer: 'panel-parent-footer.html'
}, ...]
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>
控制器:
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
});
};
});
失败,因为我收到以下错误:
http://errors.angularjs.org/1.5.9/ng/areq?p0=SiteCtrl&p1=not%20aNaNunction%2C%20got%20undefined
当所有代码都驻留在一个文件(index.html)中时,一切都很有效。我一直在寻找解决这个问题的几个星期,但我对AngularJS很新。