угловой нг-связывания-HTML не работает с YouTube встраивать

Question

Я пытаюсь jsfiddel с нг-Bind-HTML. он, похоже, не работает с встраиванием youtube, почему?

<div ng-app="App1"> 
    <div ng-app="App1" ng-controller="Ctrl"> 
     <div ng-bind-html="youtube"> 
     </div> 
     <p>this is a youtube {{youtube}}</p> 
    </div> 
</div> 

сценарий

var myApp = angular.module('App1', ['ngSanitize']); 

myApp.controller('Ctrl', ['$scope', function($scope){ 
    $scope.youtube = '<iframe width="560" height="315" src="//www.youtube.com/embed/FZSjvWtUxYk" frameborder="0" allowfullscreen></iframe>'; 

}]); 

EDIT: Первоначально мой пример был упрощен, чтобы просто добавить ссылку, благодаря IvorG я заметил, что я не добавлял «ngSanitize» как зависимость, после добавления зависимости Я отредактировал вопрос, чтобы отразить исходный вопрос, который у меня был: добавление вставки youtube.

Answer 1

Как вы пытаетесь добавить HTML в свой JS, вы должны дезинфицировать код (Why you ask?). Чтобы сделать это в Угловом, вам потребуется модуль санитарии. Добавьте это к голове:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-sanitize.js"></script> 

И добавьте в ваш модуль:

var myApp = angular.module('spicyApp1', ['ngSanitize']); 

Update И теперь я вижу, что вы пытались добавить ссылку в текст (глупо меня для наблюдения за этим). Вы можете найти правильный способ сделать в this article on Stackoverflow. Работа вокруг (но не рекомендуется) заключается в ng-bind-html элементе span. См обновленный пример на JSFiddle

Answer 2

благодаря IvorG, я был в состоянии собрать следующее решение (jsfiddle):

<div ng-app="App1"> 
    <div ng-app="App1" ng-controller="Ctrl"> 
     <div ng-bind-html="youtube"> 
     </div> 
     <p >this is a {{youtube}}</p> 
     <p show-data='' youtube="{{youtube}}"></p> 
    <button ng-click="showContent()">Show the Content</button> 
    </div> 
</div> 

сценарий

var myApp = angular.module('App1', ['ngSanitize']); 

myApp.controller('Ctrl', ['$scope', function($scope){ 
    $scope.youtube = 'tmp content'; 
    $scope.showContent = function() { 
     $scope.youtube = '<iframe width="560" height="315" src="//www.youtube.com/embed/FZSjvWtUxYk" frameborder="0" allowfullscreen></iframe>'; 
    }; 
}]); 

myApp.directive('showData', function ($compile) { 
    return { 
    scope: true, 
    link: function (scope, element, attrs) { 
     var el; 

     attrs.$observe('youtube', function (tpl) { 

     if (angular.isDefined(tpl)) { 
      // compile the provided template against the current scope 
      el = $compile(tpl)(scope); 


      // stupid way of emptying the element 
      element.html(""); 

      // add the template content 
      element.append(el); 
     } 
     }); 
    } 
    }; 
}); 

Answer 3

нг-связывать-HTML работает с YouTube врезать вам просто нужно добавить $sce.trustAsHtml(value) на значение, которое Извлечение я модифицировал свой код Отъезд plunker ..для решения

index.html

<div ng-app="App1"> 
    <div ng-app="App1" ng-controller="Ctrl"> 
    <H1>This is a youtube Embeded Video</h1> 
     <div ng-bind-html="youtube"></div> 
    </div> 
</div> 

script.js

var myApp = angular.module('App1', ['ngSanitize']); 

myApp.controller('Ctrl', ['$scope','$sce', function($scope,$sce){ 
    $scope.youtube = $sce.trustAsHtml('<iframe width="560" height="315" src="//www.youtube.com/embed/FZSjvWtUxYk" frameborder="0" allowfullscreen></iframe>'); 


}]); 

Answer 4

JS код:

var myApp = angular.module('App1', ['ngSanitize']); 
myApp.filter('sanitizer', ['$sce', function($sce) { 
     return function(url) { 
      return $sce.trustAsHtml(url); 
     }; 
}]); 

myApp.controller('Ctrl', ['$scope', function($scope){ 
$scope.youtube = '<iframe width="560" height="315" src="//www.youtube.com/embed/FZSjvWtUxYk" frameborder="0" allowfullscreen> </iframe>'; 

}]); 

HTML Код:

<div ng-app="App1"> 
<div ng-app="App1" ng-controller="Ctrl"> 
<H1>This is a youtube Embeded Video</h1> 
    <div ng-bind-html="youtube | sanitizer"></div> 
</div> 
</div> 

Это работает для меня.