I downloaded the "AngularJSDemo" project and it works out of the box. Still in my (TypeScript) AngularJS project does not. I am using the sample directive declaration:
iapp.directive('report', function () {
return {
restrict: 'EA',
transclude: 'true',
scope: {
name: '@',
parameters: '@'
},
template: "",
link: function (scope:any, element, attrs) {
//create the viewer object first, can be done in index.html as well
var reportViewer = $("#reportViewer1").data("telerik_ReportViewer");
if (!reportViewer) {
$("#reportViewer1").toggle();
$(document).ready(function () {
var d: any = $("#reportViewer1");
var f: Function = $("#reportViewer1")["telerik_ReportViewer"];
//$("#reportViewer1").telerik_ReportViewer({
f({
error: function (e, args) {
alert('Error from report directive:' + args);
},
reportSource: {
report: scope.name,
parameters: JSON.parse(scope.parameters),
},
serviceUrl: '/api/reports/',
scale: 1.0,
ready: function () {
alert("up's");
},
})
});
}
//on state change update the report source
scope.$watch('name', function () {
var reportViewer = $("#reportViewer1").data("telerik_ReportViewer");
if (reportViewer) {
var rs = reportViewer.reportSource();
if (rs && rs.report)
if (rs.report != scope.name &&
rs.parameters != scope.parameters) {
reportViewer.reportSource({
report: scope.name,
parameters: JSON.parse(scope.parameters),
});
}
}
});
}
}
});
and a similar template as follows:
<div class="container-fluid" ng-controller="reportViewModel">
<!--<h2>{{Title}}</h2>-->
<div class="spacing">Title: {{report.settings.title}}</div>
<div class="spacing">Name: {{report.settings.reportName}}</div>
<div class="spacing">Params: {{report.settings.reportParams}}</div>
<hr />
<report name="{{report.settings.reportName}}" parameters="{{report.settings.reportParams}}"></report>
</div>
-----------------------------------------------------
All looks good, and I can see that the "link" and "$watch" functions being called as expected, still the report viewer does not show-up! I do see that when the "$watch" (for "name") gets triggered that the "var reportViewer = $("#reportViewer1").data("telerik_ReportViewer");" always returns "undefined" (reportViewer is undefined). if I go to the browser and type: ".../api/reports/" I do get to the controller (as expected), but it should be called upon initialization (within link") but it never happens...
If someone have a bit of a clue what else I should be looking for it will be nice to know, until then... thanks.
Ed.