创建YouTube AngularJS指令
我创建了以下AngularJS指令来嵌入YouTube视频：
// A Simple youtube embed directive
.directive('youtube', function() {
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="http://www.youtube.com/embed/{{code}}" frameborder="0" allowfullscreen></iframe>'
};
});
从模板调用它时<youtube code="r1TK_crUbBY"></youtube>，出现以下错误：
错误：[$ interpolate：noconcat]插值时出错：http :
//www.youtube.com/embed/
{{code}}严格的上下文转义不允许在需要可信值时连接多个表达式的插值。参见http://docs.angularjs.org/api/ng。$
sce
我无法确定{{code}}表达式中的指令出了什么问题。
问题答案：
具有角1.2，你需要注入$sce的服务和trustAsResourceURL对src的iframe。
演示：http :
//plnkr.co/edit/0N728e9SAtXg3uBvuXKF?p=preview
.directive('youtube', 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) {
scope.$watch('code', function (newVal) {
if (newVal) {
scope.url = $sce.trustAsResourceUrl("http://www.youtube.com/embed/" + newVal);
}
});
}
};
});
另请参阅：从1.0迁移到1.2及相关问题
-
selector: 'app-root', template: ` {{item}} </card> })
-
View Example 我们有礼貌，所以不是仅仅将用户发送到新页面，而是通过创建属性指令并将其附加到按钮，来询问他们是否确定跳转。 selector: `[appConfirm]` }) export class ConfirmDirective { @HostListener('click', ['$event']) confirmFirst(event: Event) {
-
openwrt 的软件系统大多以 package 的形式构建，通过一个个的 package 将所需的软件集成到 openwrt 系统中。openwrt 定义了一套 package Makefile 模板，各软件按照模板定义自己的信息，如软件包的版本、下载地址、编译方式、安装地址等，来指导该软件源码的获取，编译，安装等工作，如果要添加自己开发的软件，或者移植 openwrt 没有的软件，就需要添加对
-
问题内容： 我有这样的设置： 控制器广播事件 指令侦听，然后通过append将其写入DOM，并以此创建指定指令的新元素。 IE浏览器： Angular从未调用过指令 当我检查DOM（并调试）时，我看到Controller 和指令正在执行其工作，并且有新的元素。 什么不见了？动态创建这些元素后需要做什么来触发指令调用？ 问题答案： 请参阅。您可以类似于以下方式使用此服务： 这将执行新元素的编译和
-
我目前正在进行一个对象结构练习，在这个练习中我实现了一个简单的Twitter界面。我有一个TwitterAccount对象和一个Tweet对象。TwitterAccount对象有一个包含所有tweet的堆栈。在我的getTweet（index）方法中，我希望用getTweet(1)返回最新的tweet，用getTweet(2)...等等。 我通过创建一个临时tweet-stack，从临时stack
-
默认情况下，Navicat Monitor 从受监控的实例收集一组预设的服务器指标。你可能想要添加自己的查询，以收集特定实例的一些自定义性能指标，并在指标值超过某些阈值和持续时间时接收有关自定义数据的警报。若要配置自定义指标，请前往“配置”->“自定义指标”。 创建自定义指标和警报 在自定义指标页面中，点击“+ 新建自定义指标”。 【步骤一】输入自定义指标的定义： 指标名 输入自定义指标的名。 描