Question

我有使用JsBin进行演示的工作代码，但我无法使用AngularJS指令 templateUrl （它可以使用模板值）。 http://jsbin.com/guvok/正在尝试引用http://jsbin.com/razit/，但失败了。

为了完整性和后代性，这里是代码：

hello.html的

<!DOCTYPE html>
<html ng-app="hello">
<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
</head>
<body>
  <div hello></div>
</body>
</html>

hello.css

.hello__content {
    background: #fff;
  }

hello.js

var meter = angular.module('hello', [])
  .directive( 'hello', function() {
    return {
      restrict: 'A',
      replace: true,
      //template: '<p class="hello__content">hello</p>',
      templateUrl: 'http://jsbin.com/razit/',
    };
  });

template.html

<p>hello, world</p>

Answer 1

当我运行http://jsbin.com/guvok/时，我在浏览器的Javascript控制台中收到以下错误：

Error: [$sce:insecurl] http://errors.angularjs.org/1.2.19/$sce/insecurl?p0=http%3A%2F%2Fjsbin.com%2Frazit%2F

如果你查找“$ sce：insecurl”，你会发现AngularJs error reference doc说的，

AngularJS严格上下文转义（SCE）模式（默认启用）   已阻止从不安全的网址加载资源。

通常，如果您尝试加载Angular，则会发生这种情况   来自不受信任来源的模板。这也可能是一个习惯   指令因类似原因抛出此错误。

它还提供了一些解决问题的方法，这本质上是一个CORS问题。

Answer 2

将它放在HTML的顶部（在加载Angular的脚本标记之后）：

<script type="text/ng-template" id="templateURL">
  <!-- TEMPLATE MARKUP GOES HERE -->
</script>

编辑：在您的情况下，ID将为“http://jsbin.com/razit/”，这样您就不必编辑指令。最糟糕的情况是，将templateURL更改为不引用外部jsBin。

编辑＃2：将templateUrl更改为字符串值不引用外部网址或使用http协议，我现在在jsBin编辑模式下看到您的输出。

jsBin在这里：http://jsbin.com/dutofete/1/

在JsBin中演示AngularJS指令的templateUrl

hello.html的

hello.css

hello.js

template.html

2 个答案: