如何在AngularJs中重新載入/重新編譯/刷新指令？

爲了使用小部件，我安裝了malhar-angular-dashboard模塊。在我配置我的選項儀表板佈局指令工作正常，並在視圖中顯示我的小部件。如果我改變選項在我的控制器的指令編制後，我得到這個錯誤：如何在AngularJs中重新載入/重新編譯/刷新指令？

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: []} 
     ] 
     }; 
};

運行應用程序

先裝（裝載layoutOptions）
調用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; 
    };

我想我需要重新編譯指令才能訪問我的控制器所做的新更改。有什麼建議？

來源

2016-01-06 que1326

您是否使用了'WidgetDataModel'配置您的widgetDefinitions？我發現創建它的子類是非常有用的。 –

我沒有使用layout-dashboard指令，但我使用dashboard和widget指令。我也爲此苦苦掙扎了一段時間，關於Kendo UI庫的使用，並發現了一個強制重新編譯widget的黑客攻擊。

它在小部件指令代碼中發現scope.compileTemplate（）函數調用時開始。

就我而言，我搜索了劍道電網類.K網，發現角範圍對象的這個方法：$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代碼時，我動態地交換了widgets定義的templateURL屬性。

好運，鮑勃

來源

2016-01-06 16:24:34

感謝鮑勃!!!! – que1326

的樂趣。我希望這是有用的。 –

如何在AngularJs中重新載入/重新編譯/刷新指令？

回答

相關問題