2

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>

こんにちは.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>
4

2 に答える 2

2

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 エラー リファレンス ドキュメントが見つかります。

AngularJS の Strict Contextual Escaping (SCE) モード (デフォルトで有効) は、安全でない URL からのリソースの読み込みをブロックしました。

通常、これは、信頼できないソースから Angular テンプレートを読み込もうとした場合に発生します。同様の理由で、カスタム ディレクティブがこのエラーをスローした可能性もあります。

また、本質的に CORS の問題である問題を解決するいくつかの方法も提供します。

于 2014-07-20T15:22:11.123 に答える