[英]AngularJS dynamically injecting controller, class etc
I have a widgets list that is built dynamically. 我有一个动态构建的小部件列表。 Each widget is represented by html, class, controller and a name.
每个小部件由html,类,控制器和名称表示。 Some of those might be empty (not all widgets require a controller for example).
其中一些可能是空的(例如,并非所有小部件都需要控制器)。 Then I use Gridster to load those widgets dynamically into
<li>
. 然后我使用Gridster将这些小部件动态加载到
<li>
。
My basic intuition was to ngRepeat those <li>
s but the Controller
can't be loaded dynamically from a scope variable. 我的基本直觉是ngRepeat那些
<li>
但是无法从范围变量动态加载Controller
。 I saw various suggestions in this question But I can't fit them into my own code for the following reasons: 我在这个问题中看到了各种建议但由于以下原因,我无法将它们放入我自己的代码中:
Perhaps one of those suggestions works for me and I just can't see it, so will appreciate guidance. 也许其中一个建议适合我,我只是看不到它,所以会欣赏指导。 Here is the relevant code:
这是相关代码:
Html: HTML:
<div class="widgets-background" ng-controller="Investigation2Ctrl" data-ng-init="refetchData();toggleCollapse();initWidgets();">
<div id="widgets" class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" class="yellow" name="Updates Widget">
<p style="white-space: pre;">{{gridsterUpdates}}</p>
</li>
<li ng-repeat="widget in widgetsList" name="widget.name" data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<div ng-class="widget.widgetClass" ng-include="widget.widgetHtmlInclude" ng-controller="widget.widgetController"></div>
</li>
</ul>
</div>
</div>
JavaScript: JavaScript的:
function Investigation2Ctrl($scope, $http, $dialog, DialogService, Config, ApplicationContextService, CaseHierarchyService, GeoService, Logger, $timeout) {
$scope.widgetsList = [];
$scope.initWidgets = function() {
$scope.addWidget('Export Widget', 'partials/investigation/widgets/widget-export.html');
$scope.addWidget('Timeline Widget', 'partials/investigation/widgets/widget-timeline.html');
$scope.addWidget('Search Widget', 'partials/investigation/widgets/widget-search.html');
$scope.addWidget('Facets Widget', 'partials/investigation/widgets/widget-facets.html', 'FacetsCtrl');
};
$scope.addWidget = function(widgetName, widgetIncludeHtml, widgetController, widgetClass) {
widgetClass = typeof widgetClass !== 'undefined' ? widgetClass : 'widget-container';
$scope.widgetsList.push({
'widgetName': widgetName || '',
'widgetIncludeHtml': widgetIncludeHtml || '',
'widgetController': widgetController || '',
'widgetClass': widgetClass || ''
});
};
}
Obviously the error I'm getting is widget.widgetController is undefined
, which makes since since he tries to load a controller called widget.widgetController
显然我得到的错误是
widget.widgetController is undefined
,这使得因为他试图加载一个名为widget.widgetController
的控制器
The only option I thought about is creating the <li><div ng-include...
html in JavaScript dynamically and injecting it, but well, it sucks. 我想到的唯一选择是动态地在JavaScript中创建
<li><div ng-include...
html并注入它,但是,它很糟糕。
Create a dummy, empty function and use it as controller. 创建一个虚拟的空函数并将其用作控制器。
function dummyCtrl() {} // register as controller if required.
widgetController: widgetController ||'dummyCtrl'
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.