Javascript AngularJS指令ng如果在头部和身体元素_Javascript_Html_Css_Angularjs_Angularjs Directive

Javascript AngularJS指令ng如果在头部和身体元素

javascript html css angularjs

Javascript AngularJS指令ng如果在头部和身体元素,javascript,html,css,angularjs,angularjs-directive,Javascript,Html,Css,Angularjs,Angularjs Directive,在html头和体元素中使用AngularJSng if指令是否有效 <!DOCTYPE html> <html ng-app="myApp"> <head ng-if="condition">  </head> <head ng-if="condition">

在html头和体元素中使用AngularJS

ng if

指令是否有效

<!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>

它能工作吗？

下面是一个示例指令，用于动态加载CSS文件，尽管卸载CSS文件是另一个问题，因为您需要跟踪添加了哪个脚本/样式标记，并删除相应的脚本/样式标记：

使用了此处引用的函数：

Edit在plunkr中添加了一些部分，以删除我在添加新工厂之前创建的工厂中添加的其他样式表，它并不完美，但可以正常工作。

只需尝试一下：）。相关：。停止并考虑浏览器进程加载页面。你不能放两个头。Angular不会按照您希望的顺序编译，浏览器也不知道如果isHi跳过这个问题会怎么样。如果它是一个单页应用程序，它需要共享js，那么可以使用js手动/动态加载样式表。您真的需要在一个页面中加载管理员和前端吗？从安全的角度来看，这毫无意义。如果您想在他们之间共享代码，那么创建可以在两个不同输出中注入的模块，这真的不难。使用服务器端包含管理进入每个页面的基本资源

// 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");
        }
      })
    }
  }
})