Неправильное поведение с кодом AngularJS

Question

Прошу прощения за мой английский.

мне нужна помощь, чтобы закончить эту задачу:

PHP извлекает информацию из базы данных и считывает в JavaScript с помощью JSON и динамической таблицы шоу angularjs.

Все работает, но я не знаю, как сделать следующее:

На щелчку «видеть», я хочу, соответствующее видео, чтобы играть.

Я пробовал много и не смог добиться того, для чего я настроен. Буду признателен за помощь, поскольку я все еще новичок в этом.

<script> 
 
    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 = 'ZhetpzRXztc'; 
 

 
    }); 
 
    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); 
 
       } 
 
      }); 
 
     } 
 
     }; 
 
    }); 
 
    
 
    </script>

.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="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></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>

Answer 1

Существует ли scope.code с соответствующим значением внутри функции директивы связи? Использование:

console.log(scope.code) 

, чтобы узнать, соответствует ли значение тот, который вы хотите.

вы, вероятно, отсутствует привязка в директиве рамки

scope: { code:'=code' } 

Попробуйте