Problemita con AngularJS HTML5 (RESUELTO)

Man-In-the-Middle · 10 Abril 2014, 17:05 PM

Juasss a los años que no me paso por aqui!

Holas, aver si alguien me da un cable , que ya me duele la cabeza y no es mi área esta parte y la verdad me tiene sin dormir XD,.

Cuento con 2 files, un index.html y un items.html, desde el index.html se carga items.html, el problema es que cuando le meto un script al items.html, no me los muestra, en el index.html

Index.html

Código [Seleccionar]

<!DOCTYPE html>
<html data-ng-app="ngApp">
<head>
<script src="https://jwpsrv.com/library/+SIITL5fEeO4_CIACmOLpg.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
<link href='https://fonts.googleapis.com/css?family=Duru+Sans|Istok+Web' rel='stylesheet' type='text/css'><link rel="stylesheet" href="css/bootstrap-theme.min.css">
</head>
<body data-ng-controller="main" >
    <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img ng-src="{{sitelogo}}"/><span ng-bind="sitename"></span></a>
        </div>
        <div class="navbar-collapse collapse" style="position:relative">
   <div class="simplecart_div">
    <span class="showCart"><i class="fa fa-shopping-cart"></i> <span class="simpleCart_quantity"></span> items - <span class="simpleCart_total"></span> <i class="dropdown fa fa-chevron-circle-down"></i> &nbsp;&nbsp;</span>
    <button class="simpleCart_checkout btn btn-xs btn-primary">Checkout</button>
   </div>
   <div id="cartPopover" style="display:none">
    <div class="simpleCart_items"></div>
   </div>
   
        </div><!--/.navbar-collapse -->
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
   <div id="content">
     <h1 class="page_title" ng-bind="pagetitle"></h1>
     <div style="margin-bottom:20px" class="page_description" ng-bind="pagedescription"></div>
     <div class="loading"><i style="vertical-align:middle;color:#888;font-size:30px" class="fa fa-cog fa-spin"></i> loading...</div>
        <div style="display:none" ng-cloak class="ng-cloak" data-ng-view=""></div>
    </div>
   </div>
        </div>
      <hr>








      <footer>
        <p><span ng-bind-template="&copy; {{sitename}} 2014 | Contact me at {{siteemail}} | "></span>Powered by <a href='http://canvasnow.com'>PayPal Instant Store Cart</a></p>
      </footer>
    </div> 
    
 <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
 <script src="js/vendor/jquery-1.10.1.min.js"></script>
    <script src="js/vendor/angular.js"></script>
   <script src="js/vendor/angular-resource.min.js"></script>
 <script src="js/vendor/angular-route.min.js"></script>
    <script src="js/vendor/bootstrap.min.js"></script>
 <script src="js/vendor/tabletop.js"></script>
 <script src="js/vendor/jquery.grid-a-licious.min.js"></script>
    <script src="js/simpleCart.min.js"></script>
 <script src="js/app.js"></script>
 
 <script id='script'>
 
   // MUST CHANGE THIS URL TO YOUR OWN "PUBLISHED" GOOGLE DOC URL
   public_spreadsheet_url = "https://docs.google.com/a/thelastart.com/spreadsheet/pub?key=0As7ueB-BviwSdHZjcnIybVhSWmgtdzQzd1BqTUdkbUE&output=html";
   sheet = "Sheet1";  // NORMALLY called Sheet1 on default Google Docs spreadsheet
   
   $(document).ready(function() {
    $('.showCart').on('click',function() {
     $('#cartPopover').slideToggle('fast');
     $('.showCart i.dropdown').toggleClass('fa-chevron-circle-down fa-chevron-circle-up');
    })
   });

    </script>
    </body>
</html>

Items.html

Código [Seleccionar]

<div data-ng-template="table" class="items">

 <div class="simpleCart_shelfItem item" data-ng-repeat="item in items" size-column>

  <div class="item_image"><img ng-src="{{ item.imagelink }}"/></div>
    <h2 class="item_name" ng-bind="item.name"></h2>
        <h1 class="item_prueba" ng-bind="item.prueba"></h1>
  <div class="item_description" ng-bind="item.description"></div>
       
               <div id='playerPyVnYFeEBoif'>
<script type='text/javascript'>
    jwplayer('playerPyVnYFeEBoif').setup({
        file: '/vod/mp4:/7/7/2/6/5/5/2556277.mp4',
        image: 'http://www.longtailvideo.com/content/images/jw-player/lWMJeVvV-876.jpg',
        width: '100%',
        aspectratio: '16:9'
    });
</script></div>


Hola
  <div style="margin-top:10px;">
     <button class="item_add btn btn-xs btn-success">Launch Movie</button> 
     <span class="item_price"> ${{item.price}}</span>
  </div>
  <div class="clearfix"></div> 
 </div>

</div>

Se que es una burrada, pero no entiendo donde esta la falla y como podría solucionarlo?,

Esto es lo que no me carga, ni siquiera un Hola mundo, lanzado de script?

Código [Seleccionar]

<script type='text/javascript'>
    jwplayer('playerPyVnYFeEBoif').setup({
        file: '/vod/mp4:/7/7/2/6/5/5/2556277.mp4',
        image: 'http://www.longtailvideo.com/content/images/jw-player/lWMJeVvV-876.jpg',
        width: '100%',
        aspectratio: '16:9'
    });
</script></div>

EFEX · 11 Abril 2014, 00:13 AM

Como cargas items.html ?

Edit: Bueno seguro con AngularJS, leyendo por hay parece que no es posible cargar scripts en las vistas, por lo que tenes que agregarlo en el index..
https://stackoverflow.com/questions/12436679/how-to-include-javascript-file-specific-to-each-view-angularjs

Edit: Si intento este codigo no funciona.. voy a verlo despues a ver que se puede hacer

(sino para que alguien mas lo mire y opine)

index.html

Código (html4strict) [Seleccionar]


<!doctype html>
<html data-ng-app="prueba">
 <meta charset="utf-8"/>
 <head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
  <script type="text/javascript">
   var probando = angular.module("prueba", ['ngRoute']);

   probando.config(function($routeProvider) {
    $routeProvider
    .when('/',
    {
     controller:'ListCtrl',
     templateUrl:'items.html'
    })
    .otherwise({redirectTo:'/'});
   });
     
   probando.controller('ListCtrl', function($scope) {
       //$scope.message = '...';
   });
</script>
 </head>
 <body>
  <h2>Prueba</h2>
  <div data-ng-view="">Vista aqui..</div>
 </body>
</html>

items.html

Código (html4strict) [Seleccionar]


<h1>Items</h1>
<p>Cargado <i>items.html</i></p>
<script type="text/javascript">
 alert('Hola!');
</script>

Man-In-the-Middle · 11 Abril 2014, 03:44 AM

Gracias Tio!, le voy a meter una checa al tema!! ya decia , pero algo es curioso, al momento que corro el index.html(el mio) y despues de hacer una accion(como descargar una imagen), aparece , lo cual me hace pensar que si llega a cargar el script como en cache , adjunto pic

EFEX · 11 Abril 2014, 03:47 AM

Bueno pude hacerlo siguiendo esta respuesta..
https://stackoverflow.com/questions/19434249/angular-js-how-to-load-js-files-in-partials

Fijate si podes implementarlo a tu script sino pregunta, asi es como quedo..

index.html

Código (html4strict) [Seleccionar]


<!doctype html>
<html data-ng-app="prueba">
 <meta charset="utf-8"/>
 <head>
  <script type="text/javascript" src="http://127.0.0.1/assets/js/jquery-1.8.2.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
  <script type="text/javascript">
   var probando = angular.module("prueba", ['ngRoute']);

   probando.config(['$routeProvider', '$controllerProvider',
    function($routeProvider, $controllerProvider) {

     probando.registerCtrl = $controllerProvider.register;

     $routeProvider
     .when('/',
     {
      //controller:'ListCtrl',
      templateUrl:'items.html'
     })
     .otherwise({redirectTo:'/'});
    }
   ]);
  /*
   probando.controller('ListCtrl', function($scope) {
       //$scope.message = '...';
   });
  */
</script>
 </head>
 <body>
  <h2>Prueba</h2>
  <div data-ng-view="">Vista aqui..</div>
 </body>
</html>

items.html

Código (html4strict) [Seleccionar]


<h1>Items</h1>
<p>Cargado <i>items.html</i></p>
<script type="text/javascript" src="proccessItems.js"></script>
<div data-ng-controller="proccessItems">
    {{content}}
</div>

proccessItems.js

Código (javascript) [Seleccionar]


alert('fkyeah');

probando.registerCtrl('proccessItems', function($scope){
 $scope.content = '...'; 
});

Saludos

edit: Fijate que agrege la libreria JQuery, mas bien esto es un hack

, puede que no funcione con alguna version previa de AngularJS, pero con la v1.2.10 funciona,. sino agrega los otros script y vemos.

Cita de: Man-In-the-Middle en 11 Abril 2014, 03:44 AM
pero algo es curioso, al momento que corro el index.html(el mio) y despues de hacer una accion(como descargar una imagen), aparece , lo cual me hace pensar que si llega a cargar el script como en cache , adjunto pic

Mm si le das play reproduce el video?

Man-In-the-Middle · 11 Abril 2014, 21:17 PM

Hi , gracias de nuevo, con respecto a esto

CitarMm si le das play reproduce el video?

si corre el video pero tengo que hacer una acción y solo levanta en una sola tabla, lo cual desde ya me limita, ahorita subo un video del demo, por otro lado he corrido tu source, pero solo llega hasta Prueba, no me carga el items.html, tienes algun link para ejecutar y ver donde esta mi error?
Nuevamente Grax por tu tiempo, me estas evitando un puteada el fin de semana XD!!

EFEX · 11 Abril 2014, 21:54 PM

Cita de: Man-In-the-Middle en 11 Abril 2014, 21:17 PM
... por otro lado he corrido tu source, pero solo llega hasta Prueba, no me carga el items.html, tienes algun link para ejecutar y ver donde esta mi error?

Seguro lo probaste en un servidor local ?
http://web-45e48295-8513-4f83-b91d-b74bf3e19258.runnable.com/#/
http://runnable.com/U0hHt7_lhxISJ3cH/angularjs-run-script-in-view-for-jquery-javascript-and-angular-js

Man-In-the-Middle · 11 Abril 2014, 22:30 PM

Código [Seleccionar]

Esta página incluye contenido no seguro!! Graxias Chrome jaja!!, pues corre, y corre bien sin ningún problema, muchas gracias brother de verdad, vas a hacer el primer usuario de esta pagina de Streaming media completamente FREEEEE! FKyea!

Gracias Nuevamente!!
MITM

EFEX · 11 Abril 2014, 22:44 PM

Lo de jwplayer creo que lo reproduce por que tenes la libreria js cargada en el index.

Man-In-the-Middle · 11 Abril 2014, 23:30 PM

Citar<script src="https://jwpsrv.com/library/+SIITL5fEeO4_CIACmOLpg.js"></script>

pero eso solo la libreria, la ruta del mp4 esta en el items, eso quiere decir que si lo carga, pero es un glitch por que FF no funciona, vistes el video? que te mande por privado, yo le cambio la ruta al video en items.html y me carga ese video, ahora si yo hago una actualizacion nuevamente se borra de nuevo