dimanche 23 août 2015

Wrong behavior with AngularJS code

First sorry for my bad English, I need to finish this code: php extract information from the database and read in JavaScript using JSON and the dynamic show angularjs table and everything is perfect, but not how to do the following: When I clickeo to 'see' I want the corresponding video is playing, try a thousand ways and I can not, I would appreciate someone to help me, I'm still new to this and I locks, many thanks to all.

    var aplicacion = angular.module('videos', [])
 
    
    aplicacion.controller('buscar',['$scope', function($scope){
            $scope.videos = listaVideos
    }])
    aplicacion.controller('ordenar',['$scope', function($scope){
        $scope.videos = listaVideos
        $scope.filtro = 'Fecha';
        $scope.revertir = true;
        $scope.order = function(filtro) {
        $scope.revertir = ($scope.filtro === filtro) ? !$scope.revertir : false;
        $scope.filtro = filtro;
      };
    }])

        aplicacion.controller('MainCtrl', function($scope) {
          $scope.code = 'verVideos';

        });
      aplicacion.directive('myYoutube', function($sce) {
          return {
            restrict: 'EA',
            scope: { code:'=' },
            replace: true,
            template: '<div style="height:400px;"><iframe style="overflow:hidden;height:100%;width:100%" width="100%" height="100%" src="{{url}}" frameborder="0" allowfullscreen></iframe></div>',
            link: function (scope) {
                console.log('here');
                scope.$watch('code', function (newVal) {
                   if (newVal) {
                       scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal);
                   }
                });
            }
          };
        });
.trianguloVideos:after {
  content: '\25b2'; }

/* line 393, C:/xampp/htdocs/meigacans/css/estilos.scss */
.trianguloVideos.revertir:after {
  content: '\25bc'; }

/* line 396, C:/xampp/htdocs/meigacans/css/estilos.scss */
.tablaVideos {
  margin-left: 20px;
  min-width: 920px; }
  /* line 400, C:/xampp/htdocs/meigacans/css/estilos.scss */
  .tablaVideos tr td {
    padding: 10px; }
  /* line 406, C:/xampp/htdocs/meigacans/css/estilos.scss */
  .tablaVideos tr:nth-child(2n+2) {
    background: #edecec; }
  /* line 409, C:/xampp/htdocs/meigacans/css/estilos.scss */
  .tablaVideos th {
    min-width: 70px; }
    /* line 411, C:/xampp/htdocs/meigacans/css/estilos.scss */
    .tablaVideos th a {
      text-decoration: none;
      color: #009dff; }
  /* line 417, C:/xampp/htdocs/meigacans/css/estilos.scss */
  .tablaVideos th:nth-child(2) {
    max-width: 20px; }
<script src="http://ift.tt/1mQ03rn"></script>
 <section>
            <h1>Videos</h1>
            <article ng-controller="buscar">
               <div ng-controller="MainCtrl" >
                  <div my-youtube code="code">
                      
                  </div>
                   
               </div>
                <div>
                    <label class="buscar">Buscar <input type="search" ng-model="buscar"></label>
                </div>
<table class="tablaVideos" ng-controller="ordenar" >
    <tr>
      <th>
        <a href="" ng-click="order('Nombre')">Nombre</a>
        <span class="trianguloVideos" ng-show="filtro === 'Nombre'" ng-class="{revertir:revertir}"></span>
      </th>
      <th>
        <a href="" ng-click="order('Fecha')">Fecha</a>
        <span class="trianguloVideos" ng-show="filtro === 'Fecha'" ng-class="{revertir:revertir}"></span>
      </th>
      <th>
        <a href="">Descripcion</a>
        <span class="trianguloVideos" ng-show="filtro === 'Descripcion'" ng-class="{revertir:revertir}"></span>
      </th>
    </tr>
    <tr ng-repeat="entrada in videos | orderBy:filtro:revertir | filter: buscar">
     <td><a ng-click="verVideos(entrada.Link)" href="">ver</a></td>
      <td class="Nombre">{{ entrada.Nombre }}</td>
      <td class="Fecha">{{ entrada.Fecha }}</td>
      <td>{{ entrada.Descripcion }}</td>
    </tr>
  </table>
            </article>
        </section>



Aucun commentaire:

Enregistrer un commentaire