angularjs с помощью HTML5 telerik_ReportViewer

Question

Пытается использовать telerik_ReportViewer в моем угловом приложении. Можно ли это сделать в директиве?

<script type="text/javascript"> 
    $("#reportViewer1") 
     .telerik_ReportViewer({ 
      serviceUrl: "/api/reports/", 
      templateUrl: '/ReportViewer/templates/telerikReportViewerTemplate-8.1.14.618.htmll', 
      reportSource: { 
       report: "Telerik.Reporting.Examples.CSharp.ProductCatalog, CSharp.ReportLibrary", 
       parameters: { 
        CultureID: "en" 
       } 
      } 
     }); 
</script> 

хотел бы передать переменные $ scope в отчеты отчетов Источники и параметры.

Это в настоящее время мой контроллер, и он работает, но его взломали.

angular.module('AppReport').controller('reportviewerController', ['$scope','$location', 
function ($scope, $location) { 

    $scope.ReportName = 'Default.trdx'; 

    $scope.$on('ReportName', function(ev, data) { 
     if(ev.targetScope == $scope) return; 
     $scope.ReportName = data.Report; 
     $scope.ReportViewChange(); 
    }); 

    $scope.ReportView = function (name){ 
     $("#reportViewer1") 
      .telerik_ReportViewer({ 
       serviceUrl: "http://localhost/Reporting.API/api/reports/", 
       templateUrl: '../content/templates/telerikReportViewerTemplate-9.0.15.324.html', 
       reportSource: { 
        'report': $scope.ReportName, 
        'parameterValues':{ DocumentNumber : ''} 
       } 
      }); 
     } 
    $scope.ReportViewChange = function() { 
     var viewer = $("#reportViewer1").data("telerik_ReportViewer"); 
     viewer.reportSource({ 
      'report': $scope.ReportName, 
      'parameterValues': {DocumentNumber: ''} 
     }); 
     viewer.refreshReport(); 
    } 

}]) 

Answer 1

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

function report($compile) { 

    var linker = function (scope, element, attrs) { 

     $('#ReportViewer1').telerik_ReportViewer(
      { 
       error: function (data) { 
        alert(data); 
       }, 
       reportSource: { 
        report: 'Reports.blankReport, Reports' 
       }, 
       serviceUrl: '/api/reports/', 
       templateUrl: '/ReportViewer/templates/telerikReportViewerTemplate-9.0.15.324.html', 
       ready: function() { 
        this.refreshReport(); 
       } 
      }); 
    }; 

    return { 
     restrict: 'E', 
     templateUrl: 'app/directives/Report/template.html', 
     link: linker, 
     scope: { 
      content: '=', 
      reportname: '@reportname' 
     } 

    }; 
} 

var app = angular.module('timebanking').directive("report", report); 

Шаблон

<div id="ReportViewer1" style="height: 900px;"> </div> 

Использование

<report reportname="'blankreport'"></report> 

Answer 2

Ниже приводится обновленная версия, которая на самом деле принимает различные отчеты. Единственное, что я не мог получить, это изменить отчет. Я мог бы передать новое имя отчета и обновить средство просмотра отчетов, но оно останется в том же отчете.

var reportoptions = function (reportname) { 
     // alert(reportname); 

     return { 
      error: function (data) { 
       alert(data); 
      }, 
      reportSource: { 
       report: 'Reports.' + reportname + ', Reports' 
      }, 
      serviceUrl: '/api/reports/', 
      templateUrl: '/ReportViewer/templates/telerikReportViewerTemplate-9.0.15.324.html', 
      ready: function() { 
       this.refreshReport(); 
      } 
     } 
    } 

    var linker = function (scope, element, attrs) { 
     $('#ReportViewer1').telerik_ReportViewer(reportoptions(attrs.reportname)); 
    }; 


    return { 
     restrict: 'E', 
     templateUrl: 'app/directives/Report/template.html', 
     link: linker, 
     scope: { 
      content: '=', 
      reportname: '@reportname' 
     } 

    }; 

Answer 3

Используя решение Кевина, вы можете добавить Бодрствующего свойству REPORTNAME для обновления источника данных и обновить отчет

var reportNameWatcher = scope.$watch("reportName", updateReport); 
var reportParametersWatcher = scope.$watch("reportParameters", updateReport); 

function updateReport(newVal, oldVal) { 
    if (newVal !== oldVal) { 
     report.reportSource({ 
      report: 'Reports.' + scope.reportName + ', Reports', 
      parameters: scope.reportParameters 
     }); 
     report.refreshReport(); 
    } 
} 

element.on('$destroy', function() { 
    reportNameWatcher(); 
    reportParametersWatcher(); 
}); 

Просто объект отчета из JQuery

var report = $('#ReportViewer1').telerik_ReportViewer(reportoptions(attrs.reportname)).data("telerik_ReportViewer"); 

Надежда помогает.

---

Моя полная директива:

function Report() { 

     function Link(scope, element, attrs) { 

      var report = null; 

      function createReportOptions() { 
       return { 
        error: function (e, data) { 
         console.log(data); 
        }, 
        reportSource: { 
         report: 'Reports.' + scope.reportName + ', Reports', 
         parameters: scope.reportParameters 
        }, 
        serviceUrl: '/api/reports/', 
        templateUrl: '/ReportViewer/templates/telerikReportViewerTemplate-9.0.15.324.html', 
        ready: function() { 
         this.refreshReport(); 
        } 
       } 
      } 

      function createReport() { 
       report = element.telerik_ReportViewer(createReportOptions()).data("telerik_ReportViewer"); 
      } 

      createReport(); 

      var reportNameWatcher = scope.$watch("reportName", updateReport); 
      var reportParametersWatcher = scope.$watch("reportParameters", updateReport); 

      function updateReport(newVal, oldVal) { 
       if (newVal !== oldVal) { 
        report.reportSource({ 
         report: 'Reports.' + scope.reportName + ', Reports', 
         parameters: scope.reportParameters 
        }); 
        report.refreshReport(); 
       } 
      } 

      element.on('$destroy', function() { 
       reportNameWatcher(); 
       reportParametersWatcher(); 
      }); 
     } 

     return { 
      restrict: 'A', 
      scope: { 
       reportName: '@', 
       reportParameters: '=' 
      }, 
      link: Link 
     } 
    }