Question

请原谅我的英语。

我需要一些帮助来完成这项任务：

php从数据库中提取信息，并使用JSON和动态show angularjs表读取JavaScript。

一切正常，但我不确定如何执行以下操作：

点击＆＃39;看＆＃39;，我希望播放相应的视频。

我已经尝试过很多东西并且无法实现我的目标。我很感激一些帮助，因为我还是新手。

＆＃13;

<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>

＆＃13;

.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; }

＆＃13;

<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>

＆＃13;

Answer 1

scope.code是否在指令链接函数中存在正确的值？使用：

console.log(scope.code)

查看值是否是您想要的值。

您可能错过了指令范围内的绑定

scope: { code:'=code' }

试试这个

AngularJS代码的错误行为

1 个答案: