angularjs – 用模板替换ng-include节点?

前端之家收集整理的这篇文章主要介绍了angularjs – 用模板替换ng-include节点?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
金达新到角。是否可以用所包含的模板的内容替换ng-include节点?例如,使用:
  1. <div ng-app>
  2. <script type="text/ng-template" id="test.html">
  3. <p>Test</p>
  4. </script>
  5. <div ng-include src="'test.html'"></div>
  6. </div>

生成的html是:

  1. <div ng-app>
  2. <script type="text/ng-template" id="test.html">
  3. <p>Test</p>
  4. </script>
  5. <div ng-include src="'test.html'">
  6. <span class="ng-scope"> </span>
  7. <p>Test</p>
  8. <span class="ng-scope"> </span>
  9. </div>
  10. </div>

但我想要的是:

  1. <div ng-app>
  2. <script type="text/ng-template" id="test.html">
  3. <p>Test</p>
  4. </script>
  5. <p>Test</p>
  6. </div>
我有同样的问题,仍然希望ng-include的功能包括动态模板。我正在构建一个动态的Bootstrap工具栏,我需要更干净的标记的CSS样式正确应用。

这里是我想出的对于感兴趣的人的解决方案:

HTML:

  1. <div ng-include src="dynamicTemplatePath" include-replace></div>

自定义指令:

  1. app.directive('includeReplace',function () {
  2. return {
  3. require: 'ngInclude',restrict: 'A',/* optional */
  4. link: function (scope,el,attrs) {
  5. el.replaceWith(el.children());
  6. }
  7. };
  8. });

如果在上面的示例中使用了此解决方案,将scope.dynamicTemplatePath设置为“test.html”将导致所需的标记

猜你在找的Angularjs相关文章