2015-02-26 67 views
0

我有一个动态构建的小部件列表。每个小部件由html,类,控制器和名称表示。其中一些可能是空的(例如,并非所有小部件都需要控制器)。 然后我使用Gridster将这些小部件动态加载到<li>AngularJS动态注入控制器,类等

我的基本直觉是ng重复那些<li> s,但Controller不能从scope变量动态加载。 我看到了各种建议in this question 但我不能适合他们到我自己的原因如下代码:

  1. 我用不主控制器坐在里面的控制器,这些控制器可以在不同的地方使用
  2. 小部件是根据用户请求动态创建的。当然,我不让用户选择使用的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:

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 || '' 
     }); 
    }; 
} 

很显然,我得到的错误是widget.widgetController is undefined,自从他尝试加载,这使得一个名为widget.widgetController的控制器

T他唯一的想法是动态地创建<li><div ng-include... html中的JavaScript并注入它,但是,它很糟糕。

回答

0

创建一个虚拟的空函数并将其用作控制器。

function dummyCtrl() {} // register as controller if required. 

widgetController: widgetController ||'dummyCtrl' 
+0

你能解释一下为什么这个工作正确,并把它放在我的代码? 您是否试图解决不需要控制器的场景?因为那不是问题,ng-controller ='很好.. – AlexD

+0

可以为这个创建一个plunker /小提琴吗? –