Question

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

它会起作用吗？

Answer 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中添加了一些部分，以删除在添加新工具之前添加的工厂添加的其他样式表，但这并不完美，但它可以正常工作。

AngularJS指令ng-if在头部和身体元素处

1 个答案: