AngularJS 指令 ng-if 在 head 和 body 元素答案

【问题标题】：AngularJS directive ng-if at head and body elementsAngularJS 指令 ng-if 在 head 和 body 元素
【发布时间】：2014-11-08 08:05:54
【问题描述】：

在 html 的 head 和 body 元素中使用 AngularJS ng-if 指令是否是有效的 html，如下所示？

<!DOCTYPE html>
<html ng-app="myApp">

  <head ng-if="condition">
    <!-- if conditon is true -->
  </head>

  <head ng-if="condition">
    <!-- if condition is false -->
  </head>

  <body ng-controller="MyCtrl" ng-if="condition">
    <!-- if conditon is true -->
  </body>

  <body ng-controller="MyCtrl" ng-if="condition">
    <!-- if conditon is false-->
  </body>

</html>

它会起作用吗？

【问题讨论】：

试一试:)。相关：stackoverflow.com/questions/5641997/….
停下来想想浏览器进程正在加载一个页面。你不能放2个头。 Angular 不会按照您希望的顺序编译，并且浏览器不知道 ng-if 是什么
您好，跳过这个问题更好。如果它是一个单页应用程序，它需要共享 js，样式表可以使用 js 手动/动态加载。
你真的需要把管理和前端放在一个页面上吗？从安全的角度来看，这几乎没有意义。如果您想在他们之间共享代码，请创建可以同时注入的模块
2 个不同的输出，真的不难。使用服务器端包含管理进入每个页面的初始资源

标签： javascript html css angularjs angularjs-directive

【解决方案1】：

这是一个动态加载 CSS 文件的示例指令，但卸载一个确实是另一个问题，因为您需要跟踪添加了哪个脚本/样式标签并删除相应的标签：

http://plnkr.co/edit/5fCUV6WDxoLZ8kk9NSxb?p=preview

// Code goes here

angular.module("myApp", []).directive("styleSheetLoader", function(){
  function loadjscssfile(filename, filetype){
   if (filetype=="js"){ //if filename is a external JavaScript file
    var fileref=document.createElement('script')
    fileref.setAttribute("type","text/javascript")
    fileref.setAttribute("src", filename)
   }
   else if (filetype=="css"){ //if filename is an external CSS file
    var fileref=document.createElement("link")
    fileref.setAttribute("rel", "stylesheet")
    fileref.setAttribute("type", "text/css")
    fileref.setAttribute("href", filename)
   }
   if (typeof fileref!="undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref)
  }
  return {
    restrict:"E",
    scope: {condition:"@", cssFile:"@"},
    link: function(scope, iElem, iAttrs) {
      console.log(iAttrs.condition);
      if(iAttrs.condition)
      {
        console.log("here", iAttrs.cssFile)
        loadjscssfile(iAttrs.cssFile, "css");
      }
      iAttrs.$observe("condition", function(){

        if(iAttrs.condition)
        {
          console.log("here", iAttrs.cssFile)
          loadjscssfile(iAttrs.cssFile, "css");
        }
      })
    }
  }
})

使用了从这里引用的函数： http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

编辑在 plunkr 中添加了一些部分，以删除其他样式表，这些样式表是在我添加新样式表之前添加的，虽然并不完美，但它可以工作。

【讨论】：