Как динамически установить виджеты в панели инструментов malhar angular через клиент отдыха?

Я установил модуль malhar-angular-dashboard и хочу заполнить некоторые widgetDefinitions с моими остальными данными.

HTML

<div ng-controller="widgetCtrl">
   <div  dashboard-layouts="layoutOptions" class="dashboard-container"></div>
</div>

виджетRestService

.factory('widgetRestService',['$http','UrlService','$log','$q',
   function($http,UrlService,$log,$q){

  var serviceInstance = {};

  serviceInstance.getInfo = function(){
    var request = $http({method: 'GET', url: '/rest/widgets/getListInfoDashboards'})
      .then(function(success){
        serviceInstance.widgets = success.data;
        $log.debug('serviceInstance.widgets SUCCESS',serviceInstance.widgets);
      },function(error){
        $log.debug('Error ', error);
        $log.debug('serviceInstance.widgets ERROR',serviceInstance.widgets);
      });
    return request;
  };

  serviceInstance.getAllWidgets = function () {
    if (serviceInstance.widgets) {
      return serviceInstance.widgets;
    } else {
      return [];
    }
  };

  return serviceInstance;

}])

Моя служба отдыха возвращает мне этот массив из 3 объектов :[{"name":"widgetList","title":" "},{"name":"widgetPie","title":" "},{"name":"widgetTable","title":" "}]

Другая служба

.factory("OtherService", ["widgetRestService", "$log", "$q",
   function (widgetRestService, $log, $q) {

  var deferred = $q.defer();

  widgetRestService.getInfo().then(function () {

    deferred.resolve(widgetRestService.getAllWidgets());
  });

  return deferred.promise;

}])

Контроллер

OtherService.then(function(response){
    $scope.layoutOptions = { // layout with explicit save
      storageId: 'demo-layouts-explicit-save',
      storage: localStorage,
      storageHash: 'fs4df4d51',
      widgetDefinitions:response , //must be a list
      defaultWidgets: [],
      explicitSave: true,
      defaultLayouts: [
        {title: 'Layout 1', active: true, defaultWidgets: []}
      ]
    };
    $log.debug('layoutOptions =',$scope.layoutOptions);
  });

Результат

layoutOptions: Object{defaultLayouts:Array[1],
defaultWidgets:Array[0],
explicitSave:true,
storage:Storage,
storageHash:'fs4df4d51',
storageId: 'demo-layouts-explicit-save', 
widgetDefinitions: Array[3]}

TypeError: невозможно прочитать свойство $$hashKey неопределенного значения в Object.extend (http://localhost:9000/bower_components/angular/angular.js:406:14) в Object.LayoutStorage (http://localhost:9000/bower_components/malhar-angular-dashboard/dist/malhar-angular-dashboard.js:1064:15)

Я искал в строке 2: Object.LayoutStorage и обнаружил следующее:

  angular.extend(defaults, options); //options = undefined (should have some keys and my widgetDefinitions array)
  angular.extend(options, defaults);

Переменная options не определена только тогда, когда я хочу настроить $scope.layoutOptions в функции обратного вызова then. Любые советы, как установить/избежать этого?


rest angularjs angular-module angular-http
person que1326    schedule 21.12.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в том, что директива dashboard-layouts будет скомпилирована до завершения асинхронного вызова из OtherService, что означает, что $scope.layoutOptions будет undefined.

Простое решение — запретить компиляцию директивы dashboard-layouts до того, как станет доступна директива $scope.layoutOptions.

Вы можете сделать это, используя ng-if:

<div ng-if="layoutOptions" dashboard-layouts="layoutOptions" class="dashboard-container">
</div>
person tasseKATT    schedule 21.12.2015
comment
Не за что, рад, что смог помочь :) - person tasseKATT; 21.12.2015