Necesito ayuda para resolver esto que me está volviendo loco, el problema es que necesito que lo que se clickee en los textos, se asigne automáticamente la url de los mismos al visor de PDFs. Tengo dos controllers en un módulo, una forma sería traer la función que me da la ruta desde un controlador hacia otro. El problema es que con el choclo de código que tengo más los plugins instalados no tengo idea de como seguir. Otra forma sería hacer que compartan los parámetros o métodos, pero ni idea como se hace eso en AngularJS.
Acá les mando el código y la imagen para que se den una idea.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PEM</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<style>
*{box-sizing: border-box;}
.wrapper {margin: 0 auto; width: 960px; }
.pdf-controls { width: 100%; display: block; background: #eee; padding: 1em;}
.rotate0 {-webkit-transform: rotate(0deg); transform: rotate(0deg); }
.rotate90 {-webkit-transform: rotate(90deg); transform: rotate(90deg); }
.rotate180 {-webkit-transform: rotate(180deg); transform: rotate(180deg); }
.rotate270 {-webkit-transform: rotate(270deg); transform: rotate(270deg); }
.fixed { position: fixed; top: 0; left: calc(50% - 480px); z-index: 100; width: 100%; padding: 1em; background: rgba(238, 238, 238,.9); width: 960px; }
</style>
</head>
<body ng-app="pem">
<div ng-controller="uploaderFile">
<button type="button" class="w-25 h-25" ngf-select ng-model="file" ngf-pattern="'.pdf'" ngf-accept="'.pdf'" ngf-max-size="200MB">Seleccione Archivo</button>
<br>
<button class="w-25 h-25" type="submit" ng-click="submit()">Subir</button>
<ul>
<li>Nombre del Archivo: {{file.name }}</li>
<li>Tamaño del Archivo: {{file.size/1024|number:2 }} KB</li>
<li>Tipo de Archivo: {{file.type.slice(file.type.lastIndexOf('/') + 1)}} </li>
</ul>
<div ng-show="isProcessing">
<img class="img-thumbnail" src="images/loader.gif" />
</div>
<div style="margin:1%; color:red; position: relative; z-index:10000;" ng-show="showMsg">
<div class="alert alert-success">
{{msg}}
</div>
</div>
<br>
<input type="search" ng-model="search" placeholder="Filtrar Resultados"/>
<ul>
<li ng-repeat="file in files | filter:search as results" ><a ng-href="{{getSrc(file._name)}}" target="_blank">{{file._name}}</a></li>
</ul>
</div>
<div ng-controller="pdfController">
<div class="container">
<div class="wrapper">
<ng-pdf template-url="assets/viewer.html" canvasid="pdf" scale="page-fit" page=1></ng-pdf>
</div>
</div>
</div>
<script src="js/angular.min.js"></script>
<script src="js/ng-file-upload-shim.js"></script>
<script src="js/ng-file-upload.js"></script>
<script src="js/mainapp.js"></script>
<script src="assets/pdf.js"></script>
<script src="assets/angular-pdf.min.js"></script>
</body>
</html> los controladores:
Código:
var app = angular.module('pem', ['ngFileUpload', 'pdf']);
app.controller('uploaderFile', ['$scope', 'Upload', '$http','$timeout', function ($scope, Upload, $http, $timeout) {
$scope.submit = function() {
if ($scope.file) {
$scope.upload($scope.file);
}
};
$scope.isProcessing = false;
$scope.upload = function (file) {
$scope.isProcessing = true;
Upload.upload({
url: 'upload.php',
data: {file}
}).then(function (resp) {
console.log('Success ' + resp.config.data.file.name + ' uploaded. Response: ' + resp.data);
$scope.read();
$scope.isProcessing = false;
$scope.msg = resp.data;
$scope.alert();
}, function (resp) {
console.log('Error status: ' + resp.status);
$scope.msg = error.data;
$scope.isProcessing = false;
$scope.alert();
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
});
};
$scope.alert = function(){
$scope.showMsg = true;
$timeout(function() {
$scope.showMsg = false;
}, 6000);
}
$scope.read = function(){
var request = $http({
method : 'GET',
url : 'request.php',
});
request.then(function(response){
$scope.files = response.data;
var path = response.data;
console.log(path);
}, function(error){
alert(error.data);
});
}
$scope.getSrc = function(src) {
return 'files/' + src;
};
angular.element(document).ready(function(){
$scope.read();
});
}]);
app.controller('pdfController', function($scope) {
$scope.pdfUrl = 'assets/sample.pdf';
$scope.pdfName = 'Archivo';
$scope.scroll = 0;
$scope.loading = 'Cargando';
$scope.getNavStyle = function(scroll) {
if(scroll > 100) return 'pdf-controls fixed';
else return 'pdf-controls';
}
$scope.onError = function(error) {
console.log(error);
}
$scope.onLoad = function() {
$scope.loading = '';
}
$scope.onProgress = function (progressData) {
console.log(progressData);
};
});
y el html que descargué para el visor:
Código HTML:
<!DOCTYPE html>
<!--
Copyright 2012 Mozilla Foundation
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Adobe CMap resources are covered by their own copyright but the same license:
Copyright 1990-2015 Adobe Systems Incorporated.
See https://github.com/adobe-type-tools/cmap-resources
-->
<html dir="ltr" mozdisallowselectionprint moznomarginboxes>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="google" content="notranslate">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PDF.js viewer</title>
<link rel="stylesheet" href="viewer.css">
<!-- This snippet is used in production (included from viewer.html) -->
<link rel="resource" type="application/l10n" href="locale/locale.properties">
<script src="l10n.js"></script>
<script src="../build/pdf.js"></script>
<script src="viewer.js"></script>
</head>
<body tabindex="1" class="loadingInProgress">
<nav ng-class="getNavStyle(scroll)">
<button ng-click="goPrevious()"><span><</span></button>
<button ng-click="goNext()"><span>></span></button>
<button ng-click="zoomIn()"><span>+</span></button>
<button ng-click="fit()"><span>100%</span></button>
<button ng-click="zoomOut()"><span>-</span></button>
<button ng-click="rotate()"><span>90</span></button>
<span>Page: </span>
<input type="text" min=1 ng-model="pageNum">
<span> / {{pageCount}}</span>
<span>Document URL: </span>
<input type="text" ng-model="pdfUrl">
</nav>
<hr>
{{loading}}
<canvas id="pdf" class="rotate0"></canvas>
</body>
</html> 
Desde ya les agradecería su ayuda, porque a he intentado todo lo que está a mi alcance. Gracias.