如何在html注释中使用ngIf？

我想要做的是以下几点：如何在html注释中使用ngIf？

<!-- directive: ng-my-if condition --> 
<link rel="stylesheet" ng-href="myStyle1.css"> 
<link rel="stylesheet" ng-href="myStyle2.css"> 
<link rel="stylesheet" ng-href="myStyle3.css"> 
<!-- end ng-my-if -->

我试图建立自己的ngIf，但没有奏效。
有没有办法实现这个想法？
为什么要使用html注释？因为样式将在<head>标签不允许<div>或其他标记被用来在其添加ngIf，而且还因为这些myStyle1.css, myStyle2.css, myStyle3.css将使用gulp任务与useref插件被压缩成一个文件.css，所以我不能为每个样式标签添加ng-if。
也不能把link标签内body和包装它们div因为有link标签在<head>标签和我需要尊重他们的顺序。

来源

2016-11-26 Dabbas

AngularJS有限制使用ng-if仅限于attribute由A如下所示。所以，你不能在comment

var ngIfDirective = ['$animate', function($animate) { 
    return { 
    transclude: 'element', 
    priority: 600, 
    terminal: true, 
    restrict: 'A',

使用此相反，你可以创建的是定制指令与如下限制M。我在下面写的当前指令可用于每个元素的一条评论。如果您需要处理多个元素，则应该扩展指令。

注意：我用下面只有div显示/隐藏价值link没有任何显示

var app = angular.module('app', []); 
 

 
app.controller('TestController', function($scope){ 
 
    $scope.checked = true; 
 
}); 
 

 
app.directive('ngIfExt', function() { 
 
    return { 
 
     restrict: 'M', 
 
     link: function(scope, element, attrs) { 
 
     scope.$watch(attrs.ngIfExt, function(value, oldValue) { 
 
      if(value) { 
 
       if(attrs.target){ 
 
       $(element).after(attrs.target); 
 
       } 
 
      } else { 
 
       var targetElement = $(element).next().clone(); 
 
       attrs.target = targetElement; 
 
       $(element).next().remove(); 
 
      } 
 
     }, true); 
 
    }}; 
 
}); 
 

 
angular.bootstrap(document, ['app']);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-controller="TestController"> 
 
    <input type="checkbox" ng-model="checked"/> Show/hide 
 
    <!-- directive: ng-if-ext checked --> 
 
    <link rel="stylesheet" ng-href="myStyle1.css"> 
 
    <!-- directive: ng-if-ext checked --> 
 
    <link rel="stylesheet" ng-href="myStyle2.css"> 
 
    <!-- directive: ng-if-ext checked --> 
 
    <link rel="stylesheet" ng-href="myStyle3.css"> 
 
    <!-- directive: ng-if-ext checked --> 
 
    <div>Test</div> 
 
</div>

来源

2016-11-26 14:05:46 Aruna

正如我所说，我不能用' ng-if'在'link'上自动调用那些'.css'会被压缩并转换成一个'link'标签，所以所有的属性都会被删除。 – Dabbas

我会更新这个代码 – Aruna

我已经更新了代码，请看看。 – Aruna

如何在html注释中使用ngIf？

回答

相关问题