想在我的角度应用程序中使用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>