angularjs使用HTML5 telerik_ReportViewer [英] angularjs using HTML5 telerik_ReportViewer

问题描述

想在我的角度应用程序中使用telerik_ReportViewer。可这一个指令来完成？

 ＆LT;脚本类型=文/ JavaScript的＆GT;
    $（＃reportViewer1）
        .telerik_ReportViewer（{
            的serviceUrl：/ API /报告/
            templateUrl：/ReportViewer/templates/telerikReportViewerTemplate-8.1.14.618.htmll'，
            reportSource：{
                报告：Telerik.Reporting.Examples.CSharp.ProductCatalog，CSharp.ReportLibrary
                参数：{
                    CultureID：恩
                }
            }
        }）;
＆LT; / SCRIPT＆GT;
 

想传递$范围变量的报告reportsSource和参数。

这是目前我的控制器和它的作品，但它是一个黑客。

  angular.module（'鸭$ P $支持度'）。控制器（'reportviewerController'，['$范围，$位置'，
功能（$范围，$位置）{    $ scope.ReportName ='Default.trdx';    $范围。在$（'REPORTNAME'，函数（EV，数据）{
        如果（ev.targetScope == $范围）回报;
        $ scope.ReportName = data.Report;
        $ scope.ReportViewChange（）;
    }）;    $ scope.ReportView =功能（名称）{
        $（＃reportViewer1）
            .telerik_ReportViewer（{
                的serviceUrl：HTTP：//localhost/Reporting.API/api/reports/
                templateUrl：../content/templates/telerikReportViewerTemplate-9.0.15.324.html'，
                reportSource：{
                    报告：$ scope.ReportName，
                    '的parameterValues​​：{DocumentNumber：''}
                }
            }）;
        }
    $ scope.ReportViewChange =功能（）{
        VAR观众= $（＃reportViewer1）的数据（telerik_ReportViewer）;
        viewer.reportSource（{
            报告：$ scope.ReportName，
            '的parameterValues​​：{DocumentNumber：''}
        }）;
        viewer.refreshReport（）;
    }}]）
 

解决方案

我在一个指令包裹着我。还是有点哈克但直到Telerik的发布报告观众更纯净的角度版本可能是最好的你可以做。

 函数报告（$编译）{    VAR连接=功能（范围，元素，ATTRS）{        $（'＃ReportViewer1'）。telerik_ReportViewer（
            {
                错误：功能（数据）{
                    警报（数据）;
                }，
                reportSource：{
                    报告：Reports.blankReport，报告
                }，
                的serviceUrl：'/ API /报告/'，
                templateUrl：/ReportViewer/templates/telerikReportViewerTemplate-9.0.15.324.html'，
                准备：功能（）{
                    this.refreshReport（）;
                }
            }）;
    };    返回{
        限制：'E'，
        templateUrl：应用程序/指令/报告/ template.html'，
        链接：链接，
        范围： {
            内容：'='，
            REPORTNAME：@reportname
        }    };
}VAR应用= angular.module（'timebanking'）指令（报告，报告）。
 

模板

 ＆LT; D​​IV ID =ReportViewer1的风格=高度：900px;＆GT; ＆LT; / DIV＆GT;
 

用法

 ＆LT;报告REPORTNAME ='blankreport'＆GT;＆LT; /报告＆GT;
 

Trying to use telerik_ReportViewer in my angular application. Can this be accomplish in a directive?

<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>

would like to pass on $scope variables to the reports reportsSource and parameters.

This is currently my controller and it works but its a hack.

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

}])

解决方案

I wrapped my in a directive. Still a bit hacky but until Telerik release a more pure angular version of the report viewer probably best you can do.

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

Template

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

Usage

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

这篇关于angularjs使用HTML5 telerik_ReportViewer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！