使用角指令模板内外部JavaScript文件 [英] Using external Javascript files inside an Angular directive template

问题描述

我加载dinamically在我的webapp的组件，其中有一个指令，以及模板，如下所示：

  angular.module（应用）
.directive（旋转木马，函数（）{
返回{
  限制：'E'，
  范围： {
  剩下： '@'，
  最佳： '@'
  }，
  templateUrl：carousel.html
};
 

}）;

此模板可以有CSS相关性，并且它会工作，但它不会使用Javascript工作。您如何看待它可以工作？

模板范例（carousel.html）

 ＆LT;链接rel =stylesheet属性类型=文/ CSS的href =example.css媒体=所有＆GT; //这工作
＆所述; SCRIPT SRC =jquery.min.js＆GT;＆下; /脚本＆GT; //这不工作。它甚至不将文件请求发送到服务器。
＆LT;脚本＆GT;
  警报（'不执行该警报'）;
  功能alertFn（）{
    警报（'不执行甚至要求从code的其他部分的功能​​此警报'）;
  }
＆LT; / SCRIPT＆GT;
＆LT; p =类templateExample＆gt;这一段模板在查看＆LT正确加载; / P＆GT;
 

解决方案

在结束使用jQuery作为主要依赖的问题得到解决。

根据经验，我可以看到，当你从模板中使用JavaScript文件和脚本有效地加载。

I am loading dinamically in my webapp "components", which has a directive, and a template, like the following:

angular.module('app')
.directive('carousel', function() {
return {
  restrict: 'E',
  scope: {
  left: '@',
  top: '@'
  },
  templateUrl: 'carousel.html'
};

});

This template can have CSS dependencies, and it will work, but it won't work with Javascript. How do you think it could work?

Template example (carousel.html)

<link rel="stylesheet" type="text/css" href="example.css" media="all"> //This works
<script src="jquery.min.js"></script> //This don't work. It doesn't even request the  file to the server.
<script>
  alert('This alert is not executed');
  function alertFn(){
    alert('This alert is not executed even calling the function from other parts of the code');
  }
</script>
<p class="templateExample">This template paragraph is loaded correctly in the view</p>

解决方案

At the end the problem was solved using jquery as a main dependency.

Empirically I can see that when you use the Javascript files and scripts from the templates is effectively loaded.

这篇关于使用角指令模板内外部JavaScript文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！