Как перезагрузить/перекомпилировать/обновить директиву в AngularJs?

Question

Я установил модуль malhar-angular-dashboard с целью использования виджетов. После того, как я настроил параметры , директива dashboard-layouts прекрасно работает и отображает мои виджеты в представлении. Если я изменяю варианты в моем контроллере после того, как директива обобщила я получаю эту ошибку:

Widget fromTimeout is not found. undefined

HTML

---

<div ng-controller="widgetCtrl"> 
    <div class="row"> 
    <div class="col-md-12" style="background:#B8B7C9;"> 
     <div ng-if="layoutOptions" 
      dashboard-layouts="layoutOptions" 
      class="dashboard-container" 
      template-url="views/dashboards/widget-area/customDashboardLayout.tmpl.html"> 
     </div> 
    </div> 
    </div> 

Выбрал виджет - кнопка

<div class="btn-group" ng-if="!options.widgetButtons"> 
     <span class="dropdown" on-toggle="toggled(open)"> 
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 
      <span class="fa fa-bars"></span> Chose widget 
      </button> 
      <ul class="dropdown-menu" role="menu"> 
      <li ng-repeat="widget in layoutOptions.widgetDefinitions"> <!-- initial was : widget in widgetDefs --> 
       <a href="#" ng-click="addWidgetInternal($event, widget);" class="dropdown-toggle"><span class="label label-primary">{{widget.name}}</span></a> 
      </li> 
      </ul> 
     </span> 
</div> 

JavaScript Контроллер

---

// layout with explicit save 
$scope.layoutOptions = { 
     storageId: 'demo-layouts-explicit-save', 
     storage: localStorage, 
     storageHash: 'fs4df4d51', 
     widgetDefinitions: $scope.myWidgets, // to be changed 
     layoutDefinitions:widgetDefs.REQUEST_ATTRIBUTES.layouts, // to be changed 
     defaultWidgets: [], 
     explicitSave: true, 
     defaultLayouts: [ 
      {title: 'Layout 1', active: true, defaultWidgets: []} 
     ] 
     }; 

$scope.newChanges = function(){ 
    $scope.layoutOptions = { 
     storageId: 'demo-layouts-explicit-save', 
     storage: localStorage, 
     storageHash: 'fs4df4d51', 
     widgetDefinitions:[{name:"fromTimeout"}], //changed 
     layoutDefinitions:[],      //changed 
     defaultWidgets: [], 
     explicitSave: true, 
     defaultLayouts: [ 
      {title: 'Layout 1', active: true, defaultWidgets: []} 
     ] 
     }; 
}; 

Запуск приложения

---

1. Первая загрузка (загрузка layoutOptions)

   

2. После вызова newChanges() функция

   

Заключение

---

Когда я вызвать событие щелчка от Выберите виджетaddWidgetInternal ($ события, виджет) исполняется ведьма ведет меня к этой проблеме в панели верстки коде директивы:

scope.widgetDefs = new WidgetDefCollection(scope.options.widgetDefinitions); 
    scope.addWidget = function (widgetToInstantiate, doNotSave) { 

     if (typeof widgetToInstantiate === 'string') { 
     widgetToInstantiate = { 
      name: widgetToInstantiate 
     }; 
     } 

     var defaultWidgetDefinition = scope.widgetDefs.getByName(widgetToInstantiate.name); // is undefined 
     if (!defaultWidgetDefinition) { 
     throw 'Widget ' + widgetToInstantiate.name + ' is not found.'; 
     } 

     // Determine the title for the new widget 
     var title; 
     if (!widgetToInstantiate.title && !defaultWidgetDefinition.title) { 
     widgetToInstantiate.title = 'Widget ' + count++; 
     } 

     // Instantiation 
     var widget = new WidgetModel(defaultWidgetDefinition, widgetToInstantiate); 

     // Add to the widgets array 
     scope.widgets.push(widget); 
     if (!doNotSave) { 
     scope.saveDashboard(); 
     } 

     return widget; 
    }; 

Я думаю, мне нужно перекомпилировать директиву, чтобы иметь доступ к моим новым изменениям, которые я сделал с моего контроллера. Любой совет ?

Answer 1

Я не использую директиву layout-dashboard, но я использую директивы и widget. Я также некоторое время боролся с этим вопросом относительно использования библиотеки интерфейса Kendo UI и нашел взломать, чтобы заставить виджет перекомпилировать.

Это началось, когда я обнаружил вызов функции scope.compileTemplate() в коде директивы виджета.

В моем случае, я искал Кендо класс сетки оК-сетку, и нашел этот метод углового объекта Области применения: $angular_scope.compileTemplate();

Так что в моем коде обновления, я сначала искать любую сетку Кендо в DOM (другой хак):

var grids = $(angular.element(document.getElementById('dash'))).find('.k-grid'); 

затем я использую _.each() для обхода DOM-элементов:

_.each(grids, function (elem) { 
     var grid = $(elem).parent().find('.k-grid').data('kendoGrid'); 
     // add'l code omitted... 
     if (grid) {      
      grid.$angular_scope.compileTemplate();   // *** COMPILE TEMPLATE *** 
      } 
    }); 

это не очень элегантно, но это перекомпилировать HTM L, когда я динамически меняю свойство templateURL определения виджетов.

удачи, Боб