Question

我正在使用Angularjs，我有一些部分的ng-view。部分视图在头部有一些脚本。

<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
...
</head>
<body>

	<div class="section">
      ... some content
	</div>
</body>
</html>

如果加载视图，那些脚本也会被加载。

<div style="" class="ng-scope" ng-view="">
  <meta class="ng-scope" charset="utf-8">
  <script class="ng-scope" type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <div class="section ng-scope">
    .. some view content.
  </div>
</div>

我正在使用Twitter Bootstrap的HTML编辑器快速编辑视图，此工具需要html，head和body标签。我不想从模板中删除它们。在加载时忽略局部视图的头标记是否可行？

Answer 1

不使用ng-view，最好不要在模板中创建指令，并使用compile（）或在link（）阶段删除坏处标签？

Afaik指令是改变DOM的好方法。我对compile（）并不熟悉，但如果您对以下内容感兴趣，我会让您阅读这篇文章：http://www.bennadel.com/blog/2794-when-do-you-need-to-compile-a-directive-in-angularjs.htm

Answer 2

我明白了。我看了一下templateRequestProvider和httpProvider。这是我的解决方案。

app.config(function($routeProvider, $httpProvider) {

  ....		

  function appendTransform(defaults, transform) {

    // We can't guarantee that the default transformation is an array
    defaults = angular.isArray(defaults) ? defaults : [defaults];

    // Append the new transformation to the defaults
    return defaults.concat(transform);
  }
  /**
  * My HTML Template transformation
  */
  function doTransform(value){
    if(angular.isString(value)){
      return value.replace(/<head>(.|\n)*<\/head>/mg,"");
    }
    return value;
  }

  $httpProvider.defaults.transformResponse = appendTransform($httpProvider.defaults.transformResponse,
    function(value) {
      return doTransform(value);
  });

})

这不是最佳解决方案，因为它会过滤每个http请求。最好只将它应用于ng-view。它应该与templateRequestProvider.httpOptions一起使用，但只能使用angular 1.5 +。

在Angularjs ng-view中加载时如何忽略脚本，样式等

2 个答案: