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

问题描述

我正在我的 webapp组件"中动态加载，它有一个指令和一个模板，如下所示:

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

});

这个模板可以有 CSS 依赖，它可以工作，但不能与 Javascript 一起工作.你认为它如何运作?

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

模板示例 (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>

推荐答案

最后以 jquery 作为主要依赖解决了问题.

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

根据经验，我可以看到，当您使用 Javascript 文件时，模板中的脚本会被有效加载.

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

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